/* ===================================================================== LATTE — tema Boost CS 1.6 Alb + violet, ecran complet pe desktop, adaptată pentru telefon. Ordinea: 1) culori 2) bază 3) schelet (bară laterală, sus, dock, subsol) 4) componente 5) pagini 6) efecte 7) telefon ===================================================================== */ /* --------------------------------------------------------------------- 1. CULORI ȘI MĂSURI --------------------------------------------------------------------- */ :root { --lt-bg: #f3f4fb; --lt-bg-2: #e9ebf8; --lt-paper: #ffffff; --lt-foam: #f7f8fe; --lt-milk: #eef0fc; --lt-cream: #e4e8fd; --lt-ink: #1a1c3b; --lt-ink-2: #464a73; --lt-muted: #7c81a8; --lt-faint: #aab0d2; --lt-line: #e3e6f4; --lt-line-2: #eef0f9; --lt-line-3: #d2d7f0; --lt-latte: #c3caf8; --lt-caramel: #6b79db; --lt-mocha: #4e5bc0; --lt-espresso: #23275a; --lt-on-dark: #ffffff; --lt-ok: #2f8a57; --lt-bad: #c2483a; --lt-warn: #a87618; --lt-gold: #c9962c; --lt-grad: linear-gradient(140deg, #7d8bf0 0%, #5865cc 100%); --lt-grad-deep: linear-gradient(150deg, #5a67d0 0%, #3a438f 55%, #262b63 100%); --lt-grad-latte: linear-gradient(140deg, #eef0ff 0%, #dde2fd 100%); --lt-r: 20px; --lt-r-md: 14px; --lt-r-sm: 10px; --lt-shadow: 0 1px 2px rgba(30, 34, 88, .05), 0 22px 44px -32px rgba(30, 34, 88, .30); --lt-shadow-lift: 0 2px 4px rgba(30, 34, 88, .06), 0 30px 60px -30px rgba(30, 34, 88, .38); --lt-f-display: 'Unbounded', 'Manrope', system-ui, sans-serif; --lt-f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --lt-f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --lt-rail: 256px; --lt-gutter: clamp(16px, 2.4vw, 40px); --lt-ease: cubic-bezier(.2, .8, .2, 1); /* numele vechi, folosite încă în unele template-uri (style="var(--b-...)") */ --b-ink: var(--lt-ink); --b-muted: var(--lt-muted); --b-violet: var(--lt-caramel); --b-blue: var(--lt-mocha); --b-accent: var(--lt-caramel); --b-soft: var(--lt-mocha); --b-panel: var(--lt-paper); --b-card: var(--lt-paper); --b-card-2: var(--lt-foam); --b-line: var(--lt-line); --b-line-2: var(--lt-line-2); --b-ok: var(--lt-ok); --b-bad: var(--lt-bad); --b-warn: var(--lt-warn); --b-gold: var(--lt-gold); --b-grad: var(--lt-grad); } /* --------------------------------------------------------------------- 2. BAZĂ (anulează tema veche UIkit) --------------------------------------------------------------------- */ html { font-size: 15px; overflow-y: auto; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } html, body { max-width: 100%; overflow-x: clip; } body.lt-body { margin: 0; min-height: 100vh; font-family: var(--lt-f-body); font-weight: 500; font-size: 1rem; line-height: 1.55; color: var(--lt-ink); background: var(--lt-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* grilă fină de fundal, ca pe o hartă tehnică — se stinge spre margini */ body.lt-body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; will-change: transform; transform: translateZ(0); background-image: linear-gradient(rgba(91, 103, 200, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 103, 200, .055) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 60% 0%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 90% 70% at 60% 0%, #000 30%, transparent 85%); } body.lt-body::after { content: ""; position: fixed; inset: -20% -10% auto auto; z-index: -1; width: 70vw; height: 70vh; pointer-events: none; will-change: transform; transform: translateZ(0); background: radial-gradient(closest-side, rgba(195, 202, 248, .35), transparent 70%); } .lt-body *, .lt-body *::before, .lt-body *::after { box-sizing: border-box; } .lt-body input, .lt-body button, .lt-body textarea, .lt-body select { box-sizing: border-box !important; font-family: inherit; } .lt-body img { max-width: 100%; } .lt-body a { color: var(--lt-mocha); text-decoration: none; transition: color .15s; } .lt-body a:hover { color: var(--lt-caramel); text-decoration: none; } .lt-body h1, .lt-body h2, .lt-body h3, .lt-body h4, .lt-body h5, .lt-body h6 { margin: 0 0 .6em; font-family: var(--lt-f-display); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; color: var(--lt-ink); text-transform: none; } .lt-body h1 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); } .lt-body h2 { font-size: 1.15rem; } .lt-body h3 { font-size: 1rem; } .lt-body h4, .lt-body h5, .lt-body h6 { font-size: .92rem; } .lt-body hr { border: 0; border-top: 1px solid var(--lt-line); margin: 18px 0; } .lt-body code { padding: 1px 6px; border-radius: 6px; font-family: var(--lt-f-mono); font-size: .85em; color: var(--lt-mocha); background: var(--lt-milk); } .lt-body ::selection { background: var(--lt-latte); color: var(--lt-ink); } .lt-body :focus-visible { outline: 2px solid var(--lt-caramel); outline-offset: 2px; } .lt-mono { font-family: var(--lt-f-mono); font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } /* conținutul modulelor: fără grila/cutiile temei vechi */ .lt-main .tm-middle, .lt-main .tm-middle.uk-grid { display: block; margin: 0 !important; padding: 0; } .lt-main .tm-middle > [class*='uk-width'], .lt-main .tm-middle > .tm-main, .lt-main .tm-middle > aside { float: none; width: 100% !important; padding: 0 !important; margin: 0; } .lt-main .tm-content, .lt-main .uk-article, .lt-main .tm-content .uk-article { margin: 0; padding: 0 !important; border: 0; border-radius: 0; background: transparent !important; box-shadow: none !important; } .lt-main .uk-article:before, .lt-main .uk-article:after { display: none; } .lt-main .tm-article-content { margin: 0; } .lt-main .page-header { margin: 0 0 18px; padding: 0; border: 0; } /* --------------------------------------------------------------------- 3. SCHELET --------------------------------------------------------------------- */ .lt-shell { min-height: 100vh; } .lt-stage { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; } .lt-main { flex: 1; width: 100%; padding: 8px var(--lt-gutter) 40px; } /* bara de progres de sus (la schimbarea paginii) */ .lt-progress { position: fixed; top: 0; left: 0; z-index: 2000; height: 2px; width: 0; opacity: 0; background: linear-gradient(90deg, var(--lt-latte), var(--lt-caramel), var(--lt-espresso)); transition: width .4s var(--lt-ease), opacity .3s; } .lt-progress.run { opacity: 1; width: 78%; transition: width 6s cubic-bezier(.1, .7, .1, 1), opacity .2s; } .lt-progress.end { opacity: 0; width: 100%; transition: width .2s, opacity .4s .2s; } /* --- marca --- */ .lt-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--lt-ink) !important; line-height: 1; } .lt-brand-mark { width: 28px; height: 28px; flex: none; color: var(--lt-ink); transition: transform .6s var(--lt-ease); } .lt-brand:hover .lt-brand-mark { transform: rotate(90deg); } .lt-brand-word { font-family: var(--lt-f-display); font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; } .lt-brand-word i { font-style: normal; color: var(--lt-caramel); } .lt-brand-word em { margin-left: 5px; padding: 3px 7px 3px; border-radius: 99px; font-family: var(--lt-f-mono); font-style: normal; font-size: .62rem; font-weight: 700; color: var(--lt-on-dark); background: var(--lt-caramel); vertical-align: 2px; } /* --- bara laterală --- */ .lt-rail { position: fixed; top: 0; bottom: 0; left: 0; z-index: 900; width: var(--lt-rail); display: flex; flex-direction: column; gap: 6px; padding: 22px 16px 16px; background: #fbfbfe; border-right: 1px solid var(--lt-line); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .lt-rail-head { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 18px; } .lt-rail-close { display: none !important; } .lt-rail-label { display: flex; align-items: center; gap: 10px; padding: 8px 10px 6px; font-family: var(--lt-f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lt-faint); } .lt-rail-label::after { content: ""; flex: 1; height: 1px; background: var(--lt-line); } .lt-nav { display: flex; flex-direction: column; gap: 2px; } .lt-nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-size: .9rem; font-weight: 600; color: var(--lt-ink-2) !important; transition: background .2s, color .2s, padding .25s var(--lt-ease); } .lt-nav a i { font-size: 19px; color: var(--lt-muted); transition: color .2s; } .lt-nav a span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lt-nav a small { font-family: var(--lt-f-mono); font-size: .64rem; color: var(--lt-faint); } .lt-nav a:hover { background: var(--lt-milk); color: var(--lt-ink) !important; padding-left: 16px; } .lt-nav a:hover i { color: var(--lt-caramel); } .lt-nav a.active { color: var(--lt-on-dark) !important; background: var(--lt-grad); box-shadow: 0 12px 24px -14px rgba(30, 34, 88, .45); } .lt-nav a.active i, .lt-nav a.active small { color: var(--lt-latte); } .lt-nav a.active::before { content: ""; position: absolute; left: -16px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lt-caramel); } .lt-rail-cta { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding: 16px; border: 1px solid var(--lt-line-3); border-radius: 16px; background: var(--lt-grad-latte); color: var(--lt-ink) !important; } .lt-rail-cta::after { content: ""; position: absolute; right: -28px; bottom: -28px; width: 96px; height: 96px; border-radius: 50%; border: 1px dashed rgba(91, 103, 200, .35); } .lt-rail-cta-k { font-family: var(--lt-f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lt-mocha); } .lt-rail-cta b { font-family: var(--lt-f-display); font-size: .9rem; font-weight: 600; line-height: 1.3; } .lt-rail-cta-go { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--lt-mocha); } .lt-rail-cta:hover .lt-rail-cta-go i { transform: translateX(4px); } .lt-rail-cta-go i { transition: transform .25s var(--lt-ease); } .lt-rail-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 6px 0; font-size: .72rem; color: var(--lt-muted); } /* punct „live” care pulsează */ .lt-live { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 600; color: var(--lt-ok); white-space: nowrap; } .lt-live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .lt-live i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid currentColor; animation: lt-ping 2s var(--lt-ease) infinite; } @keyframes lt-ping { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } } .lt-scrim { display: none; } /* --- bara de sus --- */ .lt-top { position: sticky; top: 0; z-index: 800; display: flex; align-items: center; gap: 14px; padding: 14px var(--lt-gutter); background: rgba(243, 244, 251, .97); border-bottom: 1px solid transparent; transition: border-color .25s, background .25s; } .lt-top.scrolled { border-bottom-color: var(--lt-line); background: rgba(248, 249, 254, .92); } .lt-burger, .lt-brand-sm, .lt-search-btn { display: none !important; } .lt-icon-btn { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--lt-line); border-radius: 12px; cursor: pointer; font-size: 20px; color: var(--lt-ink-2) !important; background: var(--lt-paper); transition: border-color .2s, color .2s, transform .2s; } .lt-icon-btn:hover { border-color: var(--lt-caramel); color: var(--lt-caramel) !important; } .lt-search { position: relative; flex: 1 1 auto; max-width: 560px; margin: 0; } .lt-search > i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--lt-muted); pointer-events: none; } .lt-body .lt-search input { width: 100%; height: 44px; margin: 0; padding: 0 44px 0 44px !important; border: 1px solid var(--lt-line) !important; border-radius: 14px; font-size: .9rem !important; font-weight: 500; color: var(--lt-ink) !important; background: var(--lt-paper) !important; outline: none; box-shadow: 0 1px 0 rgba(30, 34, 88, .04); transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; } .lt-search input::placeholder { color: var(--lt-faint); } .lt-search input:focus { border-color: var(--lt-caramel) !important; box-shadow: 0 0 0 4px rgba(107, 121, 219, .14); } .lt-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid var(--lt-line-3); border-bottom-width: 2px; border-radius: 6px; font-family: var(--lt-f-mono); font-size: .72rem; color: var(--lt-muted); background: var(--lt-foam); } .lt-search input:focus ~ .lt-kbd { opacity: 0; } .lt-user { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; } .lt-user-chip { display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border: 1px solid var(--lt-line); border-radius: 99px; background: var(--lt-paper); color: var(--lt-ink) !important; transition: border-color .2s, box-shadow .2s; } .lt-user-chip:hover { border-color: var(--lt-caramel); box-shadow: 0 8px 22px -14px rgba(30, 34, 88, .45); } .lt-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-family: var(--lt-f-display); font-size: .82rem; font-weight: 600; color: var(--lt-on-dark); background: var(--lt-grad); } .lt-user-txt { display: flex; flex-direction: column; line-height: 1.15; } .lt-user-txt b { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; } .lt-user-txt small { font-family: var(--lt-f-mono); font-size: .68rem; color: var(--lt-muted); } /* --- avertisment (menu_anunt_stats.tpl) --- */ .lt-notice { display: flex; align-items: flex-start; gap: 10px; margin: 14px 4px 4px; padding: 12px; border: 1px solid rgba(194, 72, 58, .25); border-radius: 12px; background: rgba(194, 72, 58, .06); color: var(--lt-ink-2); font-size: .74rem; line-height: 1.5; } .lt-notice i { flex: none; font-size: 18px; color: var(--lt-bad); } .lt-notice b { color: var(--lt-ink); } /* --- dock jos (telefon) --- */ .lt-dock { display: none; } /* --- subsol --- */ .lt-foot { margin: 20px var(--lt-gutter) 24px; padding: 34px clamp(18px, 3vw, 40px) 18px; border: 1px solid var(--lt-line); border-radius: 26px; background: var(--lt-paper); box-shadow: var(--lt-shadow); } .lt-foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 30px; padding-bottom: 26px; border-bottom: 1px dashed var(--lt-line-3); } .lt-foot-word { display: block; margin-bottom: 12px; font-family: var(--lt-f-display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--lt-ink); } .lt-foot-word i { font-style: normal; color: var(--lt-caramel); } .lt-foot-brand p { max-width: 380px; margin: 0 0 14px; color: var(--lt-muted); font-size: .86rem; line-height: 1.65; } .lt-foot-col { display: flex; flex-direction: column; gap: 9px; } .lt-body .lt-foot-col h4 { margin: 0 0 6px; font-family: var(--lt-f-mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--lt-faint); } .lt-foot-col > a { align-self: flex-start; font-size: .88rem; font-weight: 600; color: var(--lt-ink-2) !important; background: linear-gradient(var(--lt-caramel), var(--lt-caramel)) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--lt-ease), color .2s; } .lt-foot-col > a:hover { color: var(--lt-ink) !important; background-size: 100% 1px; } .b-pay { display: flex; flex-wrap: wrap; gap: 8px; } .b-pay span { display: grid; place-items: center; width: 74px; height: 40px; padding: 6px 10px; border: 1px solid var(--lt-line); border-radius: 10px; background: var(--lt-foam); } .b-pay img { max-height: 22px; width: auto; object-fit: contain; } .lt-foot-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 16px; font-size: .74rem; color: var(--lt-muted); } .lt-foot-counter { line-height: 0; opacity: .7; } .lt-totop { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-size: 20px; color: var(--lt-on-dark) !important; background: var(--lt-grad); transition: transform .25s var(--lt-ease); } .lt-totop:hover { transform: translateY(-3px); } /* --------------------------------------------------------------------- 4. COMPONENTE --------------------------------------------------------------------- */ .b-page { font-size: .93rem; line-height: 1.55; color: var(--lt-ink); } .b-page a { text-decoration: none; } /* --- titlu de pagină --- */ .b-head { position: relative; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 6px 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--lt-line); } .b-head > i { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; font-size: 24px; color: var(--lt-caramel); background: var(--lt-paper); border: 1px solid var(--lt-line); box-shadow: var(--lt-shadow); } .b-head-text { min-width: 0; } .b-kicker { display: block; margin-bottom: 6px; font-family: var(--lt-f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lt-caramel); } .lt-body .b-head h1 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -.03em; } .b-head-text > span { display: block; margin-top: 6px; color: var(--lt-muted); font-size: .88rem; } .b-head-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; } /* --- butoane --- */ .lt-body .b-btn, .lt-body .uk-button, .lt-body .si-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; margin: 0; border: 0; border-radius: 12px; cursor: pointer; font-family: var(--lt-f-body); font-size: .86rem !important; font-weight: 700; letter-spacing: 0; line-height: 1; text-transform: none; text-shadow: none; white-space: nowrap; vertical-align: middle; color: var(--lt-on-dark) !important; background: var(--lt-grad); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 12px 24px -14px rgba(30, 34, 88, .45); transition: transform .25s var(--lt-ease), box-shadow .25s, background .25s, color .2s, opacity .2s; } /* lumină care trece peste buton la hover */ .lt-body .b-btn::after, .lt-body .uk-button::after, .lt-body .si-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%) -100% 0 / 220% 100% no-repeat; transition: background-position .7s var(--lt-ease); } .lt-body .b-btn:hover::after, .lt-body .uk-button:hover::after, .lt-body .si-btn:hover::after { background-position: 120% 0; } .lt-body .b-btn:hover, .lt-body .uk-button:hover, .lt-body .uk-button:focus, .lt-body .si-btn:hover { color: var(--lt-on-dark) !important; background: var(--lt-grad); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 18px 30px -16px rgba(30, 34, 88, .45); outline: none; } .lt-body .b-btn:active, .lt-body .uk-button:active { transform: translateY(0) scale(.98); } .lt-body .b-btn i, .lt-body .uk-button i, .lt-body .si-btn i { font-size: 18px; } .lt-body .b-btn:disabled, .lt-body .uk-button:disabled, .lt-body .b-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } .lt-body .b-btn.ghost, .lt-body .uk-button.uk-modal-close { color: var(--lt-ink) !important; background: var(--lt-paper); box-shadow: inset 0 0 0 1px var(--lt-line-3); } .lt-body .b-btn.ghost:hover, .lt-body .uk-button.uk-modal-close:hover { color: var(--lt-ink) !important; background: var(--lt-foam); box-shadow: inset 0 0 0 1px var(--lt-caramel); } .lt-body .b-btn.ghost::after, .lt-body .uk-button.uk-modal-close::after { background-image: linear-gradient(110deg, transparent 30%, rgba(195, 202, 248, .3) 50%, transparent 70%); } .lt-body .b-btn.danger, .lt-body .uk-button-danger { background: linear-gradient(140deg, #c95a48, #a83b2e) !important; } .lt-body .uk-button-success { background: linear-gradient(140deg, #3c9a66, #2a7a4f) !important; } .lt-body .b-btn.block, .lt-body .uk-button.uk-width-1-1 { width: 100%; } .lt-body .b-btn.lg, .lt-body .uk-button-large { height: 50px; padding: 0 26px; border-radius: 14px; font-size: .92rem !important; } .lt-body .b-btn.sm, .lt-body .uk-button-mini { height: 34px; padding: 0 14px; border-radius: 10px; font-size: .78rem !important; } .lt-body .b-btn.sm i { font-size: 16px; } /* --- carduri --- */ .b-card { position: relative; margin: 0 0 20px; border: 1px solid var(--lt-line); border-radius: var(--lt-r); background: var(--lt-paper); box-shadow: var(--lt-shadow); overflow: hidden; } .b-card-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--lt-line-2); } .b-card-head > i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; font-size: 17px; color: var(--lt-caramel); background: var(--lt-milk); } .lt-body .b-card-head h2 { margin: 0; font-size: 1rem; } .b-card-head small { margin-left: auto; color: var(--lt-muted); font-size: .78rem; } .b-card-body { padding: 20px; } .b-card-body > :last-child { margin-bottom: 0; } .b-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .b-grid2 > .b-card { margin: 0; } /* lumină care urmărește cursorul pe carduri */ .lt-spot { --mx: 50%; --my: 50%; } .lt-spot::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: 0; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(195, 202, 248, .22), transparent 45%); transition: opacity .3s; } .lt-spot:hover::before { opacity: 1; } .lt-spot > * { position: relative; z-index: 1; } /* --- statistici --- */ .b-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 0 0 22px; } .b-stat { position: relative; padding: 18px 20px; border: 1px solid var(--lt-line); border-radius: var(--lt-r-md); background: var(--lt-paper); box-shadow: var(--lt-shadow); overflow: hidden; } .b-stat::after { content: ""; position: absolute; right: 14px; top: 14px; width: 8px; height: 8px; border-top: 1px solid var(--lt-line-3); border-right: 1px solid var(--lt-line-3); } .b-stat > span { display: flex; align-items: center; gap: 7px; font-family: var(--lt-f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lt-muted); } .b-stat > span i { font-size: 15px; color: var(--lt-caramel); } .b-stat > b { display: block; margin-top: 10px; font-family: var(--lt-f-display); font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em; color: var(--lt-ink); font-variant-numeric: tabular-nums; } .b-stat > b small { font-family: var(--lt-f-body); font-size: .55em; font-weight: 600; color: var(--lt-muted); letter-spacing: 0; } /* --- pastile --- */ .b-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; font-size: .74rem; font-weight: 700; color: var(--lt-mocha); background: var(--lt-milk); white-space: nowrap; } .b-pill.ok { color: var(--lt-ok); background: rgba(47, 138, 87, .1); } .b-pill.bad { color: var(--lt-bad); background: rgba(194, 72, 58, .1); } .b-pill.warn { color: var(--lt-warn); background: rgba(168, 118, 24, .12); } .b-pill.ok::before, .b-pill.bad::before, .b-pill.warn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* --- alerte --- */ .lt-body .b-alert, .lt-body .uk-alert { display: block; margin: 0 0 16px; padding: 13px 16px; border: 1px solid var(--lt-line-3); border-left: 3px solid var(--lt-caramel); border-radius: 12px; background: var(--lt-foam); color: var(--lt-ink-2); font-size: .86rem; line-height: 1.6; text-shadow: none; } .lt-body .b-alert p, .lt-body .uk-alert p { margin: 0; } .lt-body .b-alert.warn, .lt-body .uk-alert-warning { border-color: rgba(168, 118, 24, .3); border-left-color: var(--lt-warn); background: #fcf5e6; color: #6b4c12; } .lt-body .b-alert.bad, .lt-body .uk-alert-danger { border-color: rgba(194, 72, 58, .28); border-left-color: var(--lt-bad); background: #fcefec; color: #7c2c22; } .lt-body .b-alert.ok, .lt-body .uk-alert-success { border-color: rgba(47, 138, 87, .28); border-left-color: var(--lt-ok); background: #edf7f0; color: #1f5a39; } .lt-body .b-alert { display: flex; align-items: flex-start; gap: 10px; } .lt-body .b-alert > i { flex: none; font-size: 18px; line-height: 1.35; } .lt-body .uk-alert .uk-close { float: right; opacity: .6; } .b-empty { padding: 34px 16px; border: 1px dashed var(--lt-line-3); border-radius: 16px; color: var(--lt-muted); text-align: center; background: var(--lt-foam); } .b-empty i { display: block; margin-bottom: 8px; font-size: 30px; color: var(--lt-caramel); } /* --- formulare --- */ .b-field { display: block; margin: 0 0 16px; } .b-field > span:first-child { display: block; margin-bottom: 7px; font-family: var(--lt-f-mono); font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--lt-muted); } .b-field > span:first-child small { letter-spacing: 0; text-transform: none; color: var(--lt-faint); } .b-input, .lt-body .b-page input[type="text"], .lt-body .b-page input[type="password"], .lt-body .b-page input[type="email"], .lt-body .b-page input[type="search"], .lt-body .b-page input[type="number"], .lt-body .b-page input:not([type]), .lt-body .b-page select, .lt-body .b-page textarea, .lt-body .uk-modal-dialog input[type="text"], .lt-body .uk-modal-dialog input[type="password"], .lt-body .uk-modal-dialog input:not([type]), .lt-body .uk-modal-dialog select, .lt-body .uk-modal-dialog textarea { width: 100%; height: 46px !important; margin: 0; padding: 0 14px !important; border: 1px solid var(--lt-line-3) !important; border-radius: 12px !important; background: var(--lt-paper) !important; color: var(--lt-ink) !important; font-family: var(--lt-f-body); font-size: .92rem !important; font-weight: 500; line-height: normal !important; outline: none; box-shadow: none; transition: border-color .2s, box-shadow .2s; } .lt-body .b-page select, .lt-body .uk-modal-dialog select { line-height: 44px !important; padding-right: 36px !important; -webkit-appearance: none; appearance: none; cursor: pointer; background: var(--lt-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235865cc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center !important; } .lt-body .b-page textarea, .lt-body .uk-modal-dialog textarea { height: auto !important; min-height: 110px; padding: 12px 14px !important; line-height: 1.5 !important; } .lt-body .b-page input:hover, .lt-body .b-page select:hover, .lt-body .b-page textarea:hover { border-color: var(--lt-latte) !important; } .b-input:focus, .lt-body .b-page input:focus, .lt-body .b-page select:focus, .lt-body .b-page textarea:focus, .lt-body .uk-modal-dialog input:focus, .lt-body .uk-modal-dialog select:focus, .lt-body .uk-modal-dialog textarea:focus { border-color: var(--lt-caramel) !important; box-shadow: 0 0 0 4px rgba(107, 121, 219, .14) !important; } .lt-body .b-page input::placeholder, .lt-body .uk-modal-dialog input::placeholder, .lt-body textarea::placeholder { color: var(--lt-faint); } .lt-body .b-page .dataTables_length select { width: auto !important; } .b-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .b-row > * { flex: 1 1 160px; margin-bottom: 0; } .b-row > .b-btn { flex: 0 0 auto; } .b-captcha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .b-captcha > span { flex: none; line-height: 0; cursor: pointer; } .b-captcha > span img, #cim img, #paycim img { border-radius: 10px; border: 1px solid var(--lt-line); } .b-captcha input { flex: 1 1 150px; } .b-input-icon { position: relative; display: block; } .b-input-icon > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 1; font-size: 18px; color: var(--lt-muted); pointer-events: none; } .lt-body .b-page .b-input-icon input { padding-left: 44px !important; } /* comutator */ .b-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--lt-ink-2); font-size: .84rem; font-weight: 600; } .b-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .b-switch i { position: relative; flex: none; width: 42px; height: 24px; border-radius: 99px; background: var(--lt-line-3); transition: background .25s; } .b-switch i::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .3s var(--lt-ease); box-shadow: 0 1px 3px rgba(30, 34, 88, .3); } .b-switch input:checked + i { background: var(--lt-caramel); } .b-switch input:checked + i::before { transform: translateX(18px); } .b-switch input:focus-visible + i { outline: 2px solid var(--lt-caramel); outline-offset: 2px; } /* --- tabele --- */ .b-table-wrap { overflow-x: auto; } .b-table, .b-page .dataTable { width: 100% !important; margin: 0 !important; border-collapse: collapse; border: 0 !important; background: transparent !important; } .b-table th, .b-page .dataTable thead th { padding: 12px 20px !important; border: 0 !important; border-bottom: 1px solid var(--lt-line) !important; background: var(--lt-foam) !important; color: var(--lt-muted) !important; font-family: var(--lt-f-mono); font-size: .66rem !important; font-weight: 500 !important; letter-spacing: .12em; text-transform: uppercase; text-align: left; white-space: nowrap; } .b-table td, .b-page .dataTable tbody td { padding: 13px 20px !important; border: 0 !important; border-bottom: 1px solid var(--lt-line-2) !important; background: transparent !important; color: var(--lt-ink) !important; font-size: .88rem !important; vertical-align: middle; transition: background .15s; } .b-table tbody tr:last-child td, .b-page .dataTable tbody tr:last-child td { border-bottom: 0 !important; } .b-table tbody tr:hover td, .b-page .dataTable tbody tr:hover td { background: var(--lt-foam) !important; } .b-page .dataTable tbody tr { background: transparent !important; } .b-table img { vertical-align: -3px; border-radius: 2px; } .b-table a { color: var(--lt-ink); font-weight: 700; } .b-table a:hover { color: var(--lt-caramel); } .b-table .num { text-align: right; white-space: nowrap; font-family: var(--lt-f-mono); } .b-table .muted { color: var(--lt-muted) !important; } .b-table tr.current td { background: var(--lt-milk) !important; } .b-table tr#empty td { padding: 34px 16px !important; color: var(--lt-muted) !important; text-align: center; } .b-table.fixed { table-layout: fixed; min-width: 640px; } .b-table.fixed td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .b-table.fixed td img { margin-right: 2px; } .b-table.fixed th:first-child, .b-table.fixed td:first-child { padding-right: 6px !important; } .b-table.fixed tr#empty td { white-space: normal; } .b-table.fixed .b-pill { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .b-table.fixed .b-pill::before { display: inline-block; margin-right: 6px; vertical-align: 1px; } #my_servers td:first-child, #my_servers th:first-child { text-overflow: clip; } #my_servers td:nth-child(3) { font-family: var(--lt-f-mono); font-size: .8rem !important; } .b-table-actions { display: flex; gap: 6px; justify-content: flex-end; } .b-table-actions i, #my_servers td > i.uk-icon-cog, #my_servers td > i.uk-icon-trash-o { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--lt-line); border-radius: 10px; cursor: pointer; font-size: 15px; color: var(--lt-ink-2); background: var(--lt-paper); transition: border-color .2s, color .2s, background .2s; } #my_servers td > i.uk-icon-cog, #my_servers td > i.uk-icon-trash-o { margin-left: 4px; } .b-table-actions i:hover, #my_servers td > i:hover { color: var(--lt-caramel); border-color: var(--lt-caramel); } .b-table-actions i.uk-icon-trash-o:hover, #my_servers td > i.uk-icon-trash-o:hover { color: var(--lt-bad); border-color: var(--lt-bad); background: #fcefec; } /* DataTables (facturi, jurnal) */ .b-page .dataTables_wrapper { color: var(--lt-muted); font-size: .82rem; } .b-page .dt-panelmenu, .b-page .dt-panelfooter { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 20px; } .b-page .dt-panelmenu { border-bottom: 1px solid var(--lt-line-2); } .b-page .dt-panelfooter { border-top: 1px solid var(--lt-line-2); } .b-page .dt-panelmenu::after, .b-page .dt-panelfooter::after { display: none; } .b-page .dataTables_length, .b-page .dataTables_filter, .b-page .dataTables_info, .b-page .dataTables_paginate { float: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; color: var(--lt-muted) !important; } .b-page .dataTables_length label, .b-page .dataTables_filter label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: var(--lt-muted); } .lt-body .b-page .dataTables_length select { width: auto !important; height: 36px !important; line-height: 34px !important; padding: 0 30px 0 12px !important; } .lt-body .b-page .dataTables_filter input { width: 220px !important; height: 36px !important; } .b-page .dataTables_processing { color: var(--lt-caramel); background: transparent; } .b-page .dataTables_paginate ul, .b-page .dataTables_paginate .pagination { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; } .b-page .dataTables_paginate li { margin: 0 !important; padding: 0; background: none !important; border: 0 !important; } .b-page .dataTables_paginate li a, .b-page .dataTables_paginate a.paginate_button { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 10px !important; margin: 0 !important; border: 1px solid var(--lt-line) !important; border-radius: 10px !important; font-family: var(--lt-f-mono); font-size: .78rem; font-weight: 500; color: var(--lt-ink-2) !important; background: var(--lt-paper) !important; box-shadow: none !important; cursor: pointer; } .b-page .dataTables_paginate li a:hover, .b-page .dataTables_paginate a.paginate_button:hover { color: var(--lt-ink) !important; border-color: var(--lt-caramel) !important; } .b-page .dataTables_paginate li.current a, .b-page .dataTables_paginate a.paginate_button.current { color: var(--lt-on-dark) !important; border-color: transparent !important; background: var(--lt-grad) !important; } .b-page .dataTables_paginate li.unavailable a, .b-page .dataTables_paginate li.disabled a, .b-page .dataTables_paginate a.paginate_button.disabled { opacity: .4; cursor: default; } .b-page table.dataTable thead .sorting, .b-page table.dataTable thead .sorting_asc, .b-page table.dataTable thead .sorting_desc { background-image: none !important; cursor: pointer; } .b-page table.dataTable thead .sorting_asc::after { content: " ↑"; color: var(--lt-caramel); } .b-page table.dataTable thead .sorting_desc::after { content: " ↓"; color: var(--lt-caramel); } /* insigne puse din JavaScript */ .lt-body .uk-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; font-size: .72rem; font-weight: 700; line-height: 1.3; text-shadow: none; color: var(--lt-mocha); background: var(--lt-milk); } .lt-body .uk-badge-success { color: var(--lt-ok) !important; background: rgba(47, 138, 87, .1) !important; } .lt-body .uk-badge-warning { color: var(--lt-warn) !important; background: rgba(168, 118, 24, .12) !important; } .lt-body .uk-badge-danger { color: var(--lt-bad) !important; background: rgba(194, 72, 58, .1) !important; } .lt-body .uk-badge-success::before, .lt-body .uk-badge-warning::before, .lt-body .uk-badge-danger::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* --- paginare --- */ .b-pages, .hm-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 22px 0 0; padding: 0; list-style: none; } .b-pages a, .b-pages span, .hm-pages a, .hm-pages span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--lt-line); border-radius: 12px; font-family: var(--lt-f-mono); font-size: .82rem; font-weight: 500; color: var(--lt-ink-2) !important; background: var(--lt-paper); transition: border-color .2s, color .2s, transform .2s; } .b-pages a:hover, .hm-pages a:hover { border-color: var(--lt-caramel); color: var(--lt-ink) !important; transform: translateY(-1px); } .b-pages .active a, .b-pages .active span, .hm-pages .active a { color: var(--lt-on-dark) !important; border-color: transparent; background: var(--lt-grad); } /* --- ferestre (UIkit modal) --- */ .lt-body .uk-modal { background: rgba(30, 34, 88, .34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .lt-body .uk-modal-dialog { top: auto; left: auto; width: 600px; max-width: calc(100% - 24px); margin: 6vh auto 40px !important; padding: 24px 26px; border: 1px solid var(--lt-line); border-radius: 22px; background: var(--lt-paper); box-shadow: 0 40px 80px -30px rgba(30, 34, 88, .45); color: var(--lt-ink); font-weight: 500; } .lt-body .uk-modal-dialog h1, .lt-body .uk-modal-dialog h2, .lt-body .uk-modal-dialog h3, .lt-body .uk-modal-dialog h4 { font-size: 1.02rem; } .lt-body .uk-modal-header { margin: -24px -26px 20px !important; padding: 20px 64px 18px 26px !important; border-bottom: 1px solid var(--lt-line-2) !important; border-radius: 22px 22px 0 0; background: var(--lt-foam) !important; font-family: var(--lt-f-display) !important; font-size: 1.02rem !important; font-weight: 600 !important; line-height: 1.35 !important; color: var(--lt-ink) !important; text-transform: none !important; } .lt-body .uk-modal-header h2 { margin: 0; } .lt-body .uk-modal-footer { margin: 20px -26px -24px !important; padding: 16px 26px !important; border-top: 1px solid var(--lt-line-2) !important; background: transparent !important; } .lt-body .uk-modal-dialog > .uk-close:first-child { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; margin: 0; float: none; border: 1px solid var(--lt-line); border-radius: 10px; background: var(--lt-paper); opacity: 1; } .lt-body .uk-modal-dialog > .uk-close:first-child::after { content: "\00d7"; font-size: 22px; line-height: 1; color: var(--lt-ink-2); } .lt-body .uk-modal-dialog > .uk-close:first-child:hover { border-color: var(--lt-caramel); } .lt-body .uk-modal-dialog hr { margin: 16px 0; } .lt-body .uk-modal-dialog fieldset { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; } .lt-body .uk-modal-dialog fieldset > * { margin: 0 !important; } .lt-body .uk-modal-dialog fieldset input { flex: 1 1 180px; width: auto !important; } .lt-body .uk-modal-dialog .uk-list-line > li { padding: 6px 0; border-color: var(--lt-line-2); } .lt-body .uk-modal-dialog .uk-list-line { background: var(--lt-foam) !important; border: 1px solid var(--lt-line); border-radius: 12px !important; } .lt-body #type { display: block; color: var(--lt-muted); font-size: .86rem; } .b-modal-actions { display: flex; gap: 10px; margin-top: 20px; } .b-modal-actions > * { flex: 1; } .lt-body .uk-tooltip { padding: 6px 10px; border-radius: 8px; background: var(--lt-espresso); color: var(--lt-on-dark); font-family: var(--lt-f-body); font-size: .74rem; font-weight: 600; text-shadow: none; box-shadow: 0 10px 24px -10px rgba(30, 34, 88, .45); } /* notificări UIkit (Notify.show) */ .lt-body .uk-notify { z-index: 3000; } .lt-body .uk-notify-message { margin-bottom: 10px; padding: 13px 40px 13px 16px; border: 1px solid var(--lt-line); border-left: 3px solid var(--lt-caramel); border-radius: 14px; background: var(--lt-paper); color: var(--lt-ink); font-family: var(--lt-f-body); font-size: .86rem; font-weight: 600; line-height: 1.45; box-shadow: 0 24px 48px -24px rgba(30, 34, 88, .45); } .lt-body .uk-notify-message-success { border-left-color: var(--lt-ok); } .lt-body .uk-notify-message-warning { border-left-color: var(--lt-warn); } .lt-body .uk-notify-message-danger { border-left-color: var(--lt-bad); } .lt-body .uk-notify-message > .uk-close { top: 14px; right: 14px; } /* toast propriu (adresă copiată etc.) */ .lt-toast { position: fixed; left: 50%; bottom: 28px; z-index: 3000; display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 10px 16px 10px 12px; border-radius: 14px; color: var(--lt-on-dark); background: var(--lt-espresso); font-size: .84rem; font-weight: 600; box-shadow: 0 24px 48px -20px rgba(30, 34, 88, .45); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: transform .35s var(--lt-ease), opacity .25s; } .lt-toast.show { transform: translate(-50%, 0); opacity: 1; } .lt-toast i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; font-size: 15px; color: var(--lt-espresso); background: var(--lt-latte); } .lt-toast span { font-family: var(--lt-f-mono); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- tab-uri (pagina serverului: Info / Settings / Stats) --- */ .b-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px !important; padding: 5px; border: 1px solid var(--lt-line); border-radius: 16px; background: var(--lt-paper); list-style: none; box-shadow: var(--lt-shadow); } .b-tabs li { margin: 0 !important; } .b-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 11px; font-size: .84rem; font-weight: 700; color: var(--lt-ink-2) !important; transition: color .2s, background .2s; } .b-tabs a i { font-size: 17px; color: var(--lt-muted); } .b-tabs a:hover { color: var(--lt-ink) !important; background: var(--lt-milk); } .b-tabs .active a { color: var(--lt-on-dark) !important; background: var(--lt-grad); } .b-tabs .active a i { color: var(--lt-latte); } /* --- carduri selectabile (metode de plată) --- */ .b-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .b-opt { position: relative; display: block; min-width: 0; margin: 0; cursor: pointer; } .b-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .b-opt-card { position: relative; display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px; border: 1px solid var(--lt-line); border-radius: 16px; background: var(--lt-paper); transition: border-color .2s, box-shadow .2s, transform .25s var(--lt-ease), background .2s; } .b-opt:hover .b-opt-card { border-color: var(--lt-latte); transform: translateY(-2px); } .b-opt input:focus-visible + .b-opt-card { outline: 2px solid var(--lt-caramel); outline-offset: 2px; } .b-opt input:checked + .b-opt-card { border-color: var(--lt-caramel); background: var(--lt-foam); box-shadow: 0 0 0 1px var(--lt-caramel), 0 18px 34px -22px rgba(30, 34, 88, .45); } .b-opt input:checked + .b-opt-card::after { content: "\2713"; position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 800; color: var(--lt-on-dark); background: var(--lt-caramel); box-shadow: 0 4px 10px rgba(30, 34, 88, .45); } .b-opt-card img, .b-opt-card .b-opt-txt { opacity: 1 !important; } .b-opt-card img { flex: none; width: 54px; height: 54px; padding: 6px; border-radius: 12px; object-fit: contain; background: var(--lt-foam); border: 1px solid var(--lt-line-2); } .b-opt-txt { min-width: 0; margin: 0; color: var(--lt-muted); font-size: .78rem; line-height: 1.5; } .b-opt-txt b { display: block; font-size: .92rem; color: var(--lt-ink); } .b-total { margin: 16px 0 0; padding: 14px 18px; border: 1px solid rgba(47, 138, 87, .25); border-radius: 14px; background: #edf7f0; color: #1f5a39; font-size: .92rem; font-weight: 700; text-align: center; } .b-total:empty { display: none !important; } .b-amount { position: relative; max-width: 340px; } .lt-body .b-page .b-amount input[type="text"] { height: 60px !important; padding-right: 64px !important; font-family: var(--lt-f-display); font-size: 1.5rem !important; font-weight: 600; letter-spacing: -.02em; } .b-amount em { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-family: var(--lt-f-mono); font-style: normal; font-weight: 700; color: var(--lt-muted); } .b-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .b-quick button { all: unset; padding: 7px 14px; border: 1px solid var(--lt-line); border-radius: 99px; cursor: pointer; font-family: var(--lt-f-mono); font-size: .76rem; font-weight: 500; color: var(--lt-ink-2); background: var(--lt-paper); transition: border-color .2s, color .2s, transform .2s; } .b-quick button:hover { border-color: var(--lt-caramel); color: var(--lt-ink); transform: translateY(-1px); } /* pași numerotați */ .b-steps { display: flex; flex-direction: column; } .b-step { position: relative; padding: 0 0 26px 52px; } .b-step:last-child { padding-bottom: 0; } .b-step::before { content: "0" attr(data-n); position: absolute; left: 0; top: -4px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--lt-line-3); border-radius: 12px; font-family: var(--lt-f-mono); font-size: .76rem; font-weight: 700; color: var(--lt-mocha); background: var(--lt-foam); } .b-step::after { content: ""; position: absolute; left: 18px; top: 38px; bottom: 6px; width: 1px; background: repeating-linear-gradient(to bottom, var(--lt-line-3) 0 4px, transparent 4px 8px); } .b-step:last-child::after { display: none; } .b-step > b { display: block; margin-bottom: 12px; font-family: var(--lt-f-display); font-size: .95rem; font-weight: 600; color: var(--lt-ink); } /* procente pe țări */ .b-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .b-flag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--lt-line); border-radius: 99px; font-size: .78rem; color: var(--lt-muted); background: var(--lt-paper); } .b-flag img { width: 18px; height: 12px; border-radius: 2px; } .b-flag b { color: var(--lt-ink); font-weight: 700; } /* --- autentificare / înregistrare --- */ .b-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); max-width: 1040px; margin: 24px auto 30px; border: 1px solid var(--lt-line); border-radius: 28px; background: var(--lt-paper); box-shadow: var(--lt-shadow-lift); overflow: hidden; } .b-auth-side { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 480px; padding: 38px; color: var(--lt-on-dark); background: var(--lt-grad-deep); } .b-auth-side::before { content: ""; position: absolute; top: -90px; right: -90px; z-index: -1; width: 340px; height: 340px; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 34px, rgba(195, 202, 248, .16) 34px 35px); animation: lt-spin 60s linear infinite; } .b-auth-side::after { content: ""; position: absolute; top: 80px; right: 80px; z-index: -1; width: 10px; height: 10px; border-radius: 50%; background: var(--lt-caramel); box-shadow: 0 0 0 8px rgba(107, 121, 219, .2); } .lt-body .b-auth-side h2 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.03em; color: var(--lt-on-dark); } .b-auth-side p { margin: 0; color: rgba(255, 255, 255, .72); font-size: .92rem; line-height: 1.7; } .b-auth-perks { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid rgba(195, 202, 248, .22); } .b-auth-perks li { display: flex; align-items: center; gap: 10px; color: var(--lt-on-dark); font-size: .86rem; } .b-auth-perks i { color: var(--lt-latte); font-size: 18px; } .b-auth-form { padding: 44px 42px; } .lt-body .b-page .b-auth-form h1 { margin: 0 0 6px; font-size: 1.7rem; } .b-auth-form > p { margin: 0 0 26px; color: var(--lt-muted); font-size: .9rem; } .b-auth-form .b-btn { width: 100%; margin-top: 8px; } .b-auth-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--lt-line-2); font-size: .84rem; } .b-auth-links a { color: var(--lt-caramel) !important; font-weight: 700; } .b-auth-links a:hover { color: var(--lt-ink) !important; } .b-auth-remember { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 18px; } .b-auth-remember a { color: var(--lt-caramel) !important; } @keyframes lt-spin { to { transform: rotate(360deg); } } /* --- pagini de text / mesaje --- */ .b-prose { width: 100%; max-width: none; color: var(--lt-ink-2); font-size: .98rem; line-height: 1.8; } .b-prose h1, .b-prose h2, .b-prose h3 { margin: 1.4em 0 .5em; } .b-prose > :first-child { margin-top: 0; } .b-prose p { margin: 0 0 14px; } .b-prose a { color: var(--lt-caramel); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .b-prose a:hover { color: var(--lt-ink); } .b-prose ul, .b-prose ol { margin: 0 0 14px; padding-left: 22px; } .b-prose li { margin-bottom: 6px; } .b-prose li::marker { color: var(--lt-caramel); } .b-prose img { max-width: 100%; height: auto; border-radius: 14px; } .b-prose table { width: 100%; margin: 0 0 16px; border-collapse: collapse; font-size: .9rem; } .b-prose th, .b-prose td { padding: 10px 12px; border: 1px solid var(--lt-line); text-align: left; } .b-prose th { font-family: var(--lt-f-mono); font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--lt-muted); background: var(--lt-foam); } .b-prose blockquote { margin: 0 0 14px; padding: 12px 18px; border-left: 3px solid var(--lt-caramel); border-radius: 0 12px 12px 0; background: var(--lt-foam); } .b-prose code { padding: 1px 6px; border-radius: 6px; font-size: .86em; color: var(--lt-mocha); background: var(--lt-milk); } .b-message { position: relative; max-width: 600px; margin: 40px auto; padding: 48px 34px; border: 1px solid var(--lt-line); border-radius: 28px; background: var(--lt-paper); box-shadow: var(--lt-shadow-lift); text-align: center; overflow: hidden; } .b-message::before { content: ""; position: absolute; left: 50%; top: -160px; width: 360px; height: 360px; transform: translateX(-50%); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 30px, rgba(107, 121, 219, .1) 30px 31px); pointer-events: none; } .b-message > * { position: relative; } .b-message > i { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 22px; font-size: 34px; color: var(--lt-on-dark); background: var(--lt-grad); box-shadow: 0 18px 34px -16px rgba(30, 34, 88, .45); } .b-message > i.bad { background: linear-gradient(140deg, #c95a48, #a83b2e); } .b-message > i.ok { background: linear-gradient(140deg, #3c9a66, #2a7a4f); } .b-message .b-big { display: block; margin-bottom: 8px; font-family: var(--lt-f-display); font-size: clamp(4rem, 12vw, 7rem); font-weight: 700; line-height: 1; letter-spacing: -.06em; color: var(--lt-ink); } .b-message p { margin: 0 auto 24px; max-width: 440px; color: var(--lt-muted); font-size: .94rem; } /* --- fereastra pentru vizitatori (connects) --- */ .b-guest { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; background: rgba(30, 34, 88, .34); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: lt-fade .25s; } .b-guest[hidden] { display: none; } .b-guest-box { position: relative; width: 100%; max-width: 440px; padding: 34px 28px 26px; border: 1px solid var(--lt-line); border-radius: 26px; background: var(--lt-paper); box-shadow: 0 40px 80px -30px rgba(30, 34, 88, .45); color: var(--lt-ink); text-align: center; animation: lt-rise .4s var(--lt-ease); } .lt-body .b-guest-box h3 { margin: 0 0 8px; font-size: 1.15rem; } .b-guest-box p { margin: 0 0 22px; color: var(--lt-muted); font-size: .9rem; line-height: 1.6; } .b-guest-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 20px; font-size: 28px; color: var(--lt-on-dark); background: var(--lt-grad); box-shadow: 0 18px 34px -16px rgba(30, 34, 88, .45); } .b-guest-actions { display: flex; gap: 10px; } .b-guest-actions .b-btn { flex: 1; } .b-guest-close { all: unset; position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--lt-line); border-radius: 10px; cursor: pointer; font-size: 20px; color: var(--lt-ink-2); } .b-guest-close:hover { border-color: var(--lt-caramel); } @keyframes lt-fade { from { opacity: 0; } } @keyframes lt-rise { from { opacity: 0; transform: translateY(16px) scale(.98); } } /* --- căutare (search_main.tpl) --- */ .b-search-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; } .b-search-form .wide { grid-column: span 2; } .b-search-form .b-minmax { display: flex; gap: 8px; } .b-search-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--lt-line-2); } /* --------------------------------------------------------------------- 5a. CABINET — meniul devine „card de membru” + tab-uri deasupra paginii --------------------------------------------------------------------- */ .lt-main .tm-middle:has(> .lt-cab) { display: flex !important; flex-direction: column; } .lt-main .tm-middle > .lt-cab { order: -1; margin-bottom: 22px; } .lt-cab-id { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 24px; color: var(--lt-on-dark); background: var(--lt-grad-deep); box-shadow: 0 28px 50px -30px rgba(30, 34, 88, .45); } .lt-cab-id::before { content: ""; position: absolute; right: 18%; top: -120px; z-index: -1; width: 300px; height: 300px; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 26px, rgba(195, 202, 248, .12) 26px 27px); } .lt-cab-id::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(500px 200px at 100% 100%, rgba(107, 121, 219, .35), transparent 70%); } .lt-cab-avatar { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; font-family: var(--lt-f-display); font-size: 1.3rem; font-weight: 600; color: var(--lt-espresso); background: var(--lt-grad-latte); } .lt-cab-who { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .lt-cab-who small, .lt-cab-wallet small { font-family: var(--lt-f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); } .lt-cab-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--lt-f-display); font-size: 1.15rem; font-weight: 600; } .lt-cab-who .lt-mono { font-size: .76rem; color: var(--lt-latte); } .lt-cab-wallet { display: flex; flex-direction: column; align-items: flex-end; padding: 0 6px 0 22px; border-left: 1px solid rgba(195, 202, 248, .25); } .lt-cab-wallet b { font-family: var(--lt-f-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; } .lt-cab-wallet em { font-family: var(--lt-f-mono); font-style: normal; font-size: .8rem; color: var(--lt-latte); } .lt-body .lt-cab-id .b-btn { color: var(--lt-espresso) !important; background: var(--lt-grad-latte); box-shadow: none; } .lt-body .lt-cab-id .b-btn:hover { color: var(--lt-espresso) !important; background: #fff; } .lt-cab-tabs { display: flex; gap: 4px; margin-top: 12px; padding: 5px; border: 1px solid var(--lt-line); border-radius: 18px; background: var(--lt-paper); box-shadow: var(--lt-shadow); overflow-x: auto; scrollbar-width: none; } .lt-cab-tabs::-webkit-scrollbar { display: none; } .lt-cab-tabs a { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 10px 16px; border-radius: 13px; font-size: .86rem; font-weight: 700; color: var(--lt-ink-2) !important; white-space: nowrap; transition: background .2s, color .2s; } .lt-cab-tabs a i { font-size: 18px; color: var(--lt-muted); transition: color .2s; } .lt-cab-tabs a:hover { background: var(--lt-milk); color: var(--lt-ink) !important; } .lt-cab-tabs a:hover i { color: var(--lt-caramel); } .lt-cab-tabs a.active { color: var(--lt-on-dark) !important; background: var(--lt-grad); } .lt-cab-tabs a.active i { color: var(--lt-latte); } .lt-cab-tabs a.b-logout { margin-left: auto; color: var(--lt-bad) !important; } .lt-cab-tabs a.b-logout i { color: var(--lt-bad); } .lt-cab-tabs a.b-logout:hover { background: #fcefec; } /* --------------------------------------------------------------------- 5b. HOME --------------------------------------------------------------------- */ .hm { color: var(--lt-ink); } .hm-section { margin: 0 0 44px; } .hm-idx { display: inline-grid; place-items: center; flex: none; height: 26px; padding: 0 9px; border: 1px solid var(--lt-line-3); border-radius: 8px; font-family: var(--lt-f-mono); font-size: .7rem; font-weight: 700; color: var(--lt-caramel); background: var(--lt-paper); } /* titluri de secțiune */ .hm-title { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--lt-line); } .hm-title > i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; font-size: 17px; color: var(--lt-caramel); background: var(--lt-paper); border: 1px solid var(--lt-line); } .lt-body .hm-title h2 { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.5rem); letter-spacing: -.03em; } .hm-title small { margin-left: auto; color: var(--lt-muted); font-size: .8rem; } .hm-title.befirst .hm-idx { color: var(--lt-espresso); border-color: transparent; background: linear-gradient(140deg, #f3d9a0, #d9a548); } /* --- hero --- */ .hm-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin: 6px 0 22px; padding: clamp(26px, 4vw, 56px); border: 1px solid var(--lt-line); border-radius: 32px; background: var(--lt-paper); box-shadow: var(--lt-shadow-lift); } .hm-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 320px at 0% 0%, var(--lt-cream), transparent 70%); } /* colțuri tip vizor */ .hm-hero::after { content: ""; position: absolute; inset: 16px; z-index: -1; pointer-events: none; background: linear-gradient(var(--lt-line-3), var(--lt-line-3)) 0 0 / 18px 1px, linear-gradient(var(--lt-line-3), var(--lt-line-3)) 0 0 / 1px 18px, linear-gradient(var(--lt-line-3), var(--lt-line-3)) 100% 0 / 18px 1px, linear-gradient(var(--lt-line-3), var(--lt-line-3)) 100% 0 / 1px 18px, linear-gradient(var(--lt-line-3), var(--lt-line-3)) 0 100% / 18px 1px, linear-gradient(var(--lt-line-3), var(--lt-line-3)) 0 100% / 1px 18px, linear-gradient(var(--lt-line-3), var(--lt-line-3)) 100% 100% / 18px 1px, linear-gradient(var(--lt-line-3), var(--lt-line-3)) 100% 100% / 1px 18px; background-repeat: no-repeat; } .hm-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; font-family: var(--lt-f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lt-muted); } .hm-eyebrow .lt-live { padding: 4px 10px 4px 9px; border: 1px solid rgba(47, 138, 87, .25); border-radius: 99px; background: rgba(47, 138, 87, .07); } .lt-body .hm-hero h1 { margin: 0 0 20px; font-size: clamp(2.6rem, 6.4vw, 5.6rem); font-weight: 700; line-height: .95; letter-spacing: -.055em; } .hm-hero h1 span { display: inline-block; color: var(--lt-caramel); } .hm-lead { max-width: 640px; margin: 0 0 28px; color: var(--lt-ink-2); font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.75; } .hm-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .hm-hero-links { display: flex; flex-wrap: wrap; gap: 6px 18px; } .hm-hero-links a { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--lt-ink-2) !important; } .hm-hero-links a i { font-size: 17px; color: var(--lt-caramel); } .hm-hero-links a:hover { color: var(--lt-caramel) !important; } /* radar */ .hm-scope { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 26px; background: var(--lt-grad-deep); box-shadow: 0 30px 60px -30px rgba(30, 34, 88, .45); } .hm-radar { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, rgba(195, 202, 248, .1), transparent 70%); } .hm-radar-ring { position: absolute; border: 1px solid rgba(195, 202, 248, .22); border-radius: 50%; } .hm-radar-ring.r1 { inset: 0; } .hm-radar-ring.r2 { inset: 17%; } .hm-radar-ring.r3 { inset: 34%; border-style: dashed; } .hm-radar-cross { position: absolute; inset: 0; background: linear-gradient(rgba(195, 202, 248, .18), rgba(195, 202, 248, .18)) 50% 0 / 1px 100% no-repeat, linear-gradient(rgba(195, 202, 248, .18), rgba(195, 202, 248, .18)) 0 50% / 100% 1px no-repeat; } .hm-radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg 280deg, rgba(195, 202, 248, 0) 280deg, rgba(195, 202, 248, .5) 360deg); animation: lt-spin 5s linear infinite; } .hm-blip { position: absolute; z-index: 2; width: var(--s, 6px); height: var(--s, 6px); margin: calc(var(--s, 6px) / -2) 0 0 calc(var(--s, 6px) / -2); border-radius: 50%; background: var(--lt-latte); box-shadow: 0 0 0 3px rgba(195, 202, 248, .18), 0 0 14px rgba(195, 202, 248, .8); animation: lt-blip 5s linear infinite; animation-delay: var(--d, 0s); } .hm-blip.off { background: #9aa3e6; box-shadow: none; } @keyframes lt-blip { 0%, 100% { opacity: .35; } 4% { opacity: 1; transform: scale(1.5); } 30% { opacity: .55; transform: scale(1); } } .hm-telemetry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(195, 202, 248, .2); } .hm-telemetry > div { padding: 14px 6px 2px; text-align: center; } .hm-telemetry > div + div { border-left: 1px solid rgba(195, 202, 248, .2); } .hm-telemetry small { display: block; font-family: var(--lt-f-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); } .hm-telemetry b { display: block; margin-top: 4px; font-family: var(--lt-f-display); font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 600; letter-spacing: -.03em; color: var(--lt-on-dark); font-variant-numeric: tabular-nums; } /* --- servicii --- */ .hm-svcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 48px; } .hm-svc { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-height: 196px; padding: 20px; border: 1px solid var(--lt-line); border-radius: 22px; background: var(--lt-paper); color: var(--lt-ink) !important; box-shadow: var(--lt-shadow); transition: transform .35s var(--lt-ease), box-shadow .35s, border-color .2s; } .hm-svc:hover { transform: translateY(-4px); border-color: var(--lt-latte); box-shadow: var(--lt-shadow-lift); } .hm-svc-n { font-family: var(--lt-f-mono); font-size: .66rem; letter-spacing: .1em; color: var(--lt-faint); } .hm-svc > i { margin: 14px 0 auto; font-size: 30px; color: var(--lt-caramel); transition: transform .4s var(--lt-ease); } .hm-svc:hover > i { transform: translateY(-3px) rotate(-6deg); } .hm-svc b { margin-top: 18px; font-family: var(--lt-f-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; } .hm-svc small { color: var(--lt-muted); font-size: .8rem; line-height: 1.45; } .hm-svc-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: .8rem; font-weight: 800; color: var(--lt-mocha); } .hm-svc-go i { transition: transform .3s var(--lt-ease); } .hm-svc:hover .hm-svc-go i { transform: translateX(5px); } .hm-svc.gold { border-color: #e4c98f; background: linear-gradient(160deg, #fbf1dd 0%, #f2dcb1 100%); } .hm-svc.gold > i { color: #a2741c; } .hm-svc.gold .hm-svc-n { color: #a2741c; } /* --- carduri Be First / Top --- */ .hm-top-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; } @media (min-width: 1280px) { .hm-top-grid { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); } } .hm-top { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--lt-line); border-radius: 20px; background: var(--lt-paper); color: var(--lt-ink) !important; box-shadow: var(--lt-shadow); transition: transform .35s var(--lt-ease), box-shadow .35s, border-color .2s; transform-style: preserve-3d; } .hm-top:hover { border-color: var(--lt-latte); box-shadow: var(--lt-shadow-lift); } .hm-top-shot { position: relative; isolation: isolate; height: 118px; padding: 12px; display: flex; align-items: flex-start; justify-content: space-between; overflow: hidden; background: var(--lt-milk); } .hm-top-shot::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--map, none) center / cover; filter: saturate(.8) sepia(.18); transform: scale(1.02); transition: transform .8s var(--lt-ease); } .hm-top-shot::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(30, 34, 88, .1) 0%, rgba(30, 34, 88, .66) 100%); } .hm-top.free .hm-top-shot::after { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(107, 121, 219, .07) 10px 11px); } .hm-rank { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 8px; font-family: var(--lt-f-mono); font-size: .76rem; font-weight: 700; color: var(--lt-ink); background: rgba(255, 255, 255, .92); } .hm-top.befirst .hm-rank { color: var(--lt-espresso); background: linear-gradient(140deg, #f7e1ae, #d9a548); } .hm-status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 99px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(30, 34, 88, .34); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .hm-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .hm-status.on { color: #b9f0cf; } .hm-status.off { color: #ffc2b8; } .hm-status.free { color: var(--lt-mocha); background: var(--lt-paper); border: 1px dashed var(--lt-line-3); } .hm-top-map { position: absolute; left: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--lt-f-mono); font-size: .74rem; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); } .hm-top-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 14px 14px 14px; } .lt-body .hm-top-title { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; font-family: var(--lt-f-body); font-size: .94rem; font-weight: 800; letter-spacing: -.01em; } .hm-top-title img { flex: none; border-radius: 2px; } .hm-top-title a, .hm-top-title span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lt-ink) !important; } .hm-top-title a:hover { color: var(--lt-caramel) !important; } .hm-top-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; } .hm-load { font-family: var(--lt-f-mono); font-size: .78rem; color: var(--lt-muted); white-space: nowrap; } .hm-load b { color: var(--lt-ink); font-weight: 700; } .hm-top-foot .hm-copy { flex: 1; min-width: 0; } .hm-top.free { border-style: dashed; border-color: var(--lt-line-3); background: var(--lt-foam); box-shadow: none; } .hm-top.free:hover { border-color: var(--lt-caramel); background: var(--lt-paper); } .hm-free-plus { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); font-size: 30px; color: var(--lt-latte); transition: transform .4s var(--lt-ease), color .2s; } .hm-top.free:hover .hm-free-plus { transform: translate(-50%, -50%) rotate(90deg); color: var(--lt-caramel); } .hm-free-txt { margin: 0; color: var(--lt-muted); font-size: .8rem; } .hm-buy { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; font-size: .8rem; font-weight: 800; color: var(--lt-mocha); } .hm-top.tinted { border-color: color-mix(in srgb, var(--tint) 75%, var(--lt-line)); } .hm-top.tinted .hm-top-body { background: color-mix(in srgb, var(--tint) 26%, #fff); } /* bară de jucători */ .hm-meter { position: relative; display: block; height: 4px; border-radius: 99px; background: var(--lt-line-2); overflow: hidden; } .hm-meter i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); max-width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lt-latte), var(--lt-caramel)); transition: width 1s var(--lt-ease); } /* butoane comune: copiere adresă, play */ .hm-copy { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 30px; padding: 0 10px; border: 1px solid var(--lt-line); border-radius: 9px; cursor: pointer; font-family: var(--lt-f-mono); font-size: .74rem; color: var(--lt-ink-2); background: var(--lt-foam); transition: border-color .2s, color .2s, background .2s; } .hm-copy span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hm-copy i { flex: none; font-size: 14px; color: var(--lt-muted); } .hm-copy:hover { border-color: var(--lt-caramel); color: var(--lt-ink); background: var(--lt-paper); } .hm-copy:focus-visible { outline: 2px solid var(--lt-caramel); outline-offset: 2px; } .hm-copy.copied { border-color: var(--lt-ok); color: var(--lt-ok); } .hm-play { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; height: 34px; min-width: 34px; padding: 0 10px; border-radius: 10px; font-size: .8rem; font-weight: 800; color: var(--lt-on-dark) !important; background: var(--lt-grad); cursor: pointer; transition: transform .25s var(--lt-ease), box-shadow .25s, background .2s; } .hm-play i { font-size: 18px; } .hm-play:hover { transform: translateY(-1px); background: var(--lt-caramel); box-shadow: 0 10px 20px -10px rgba(30, 34, 88, .45); } .hm-play.disabled { opacity: .3; cursor: not-allowed; pointer-events: none; } .hm-top .hm-play span { display: none; } /* --- lista de servere --- */ .hm-list-head, .hm-srv { display: grid; grid-template-columns: 168px minmax(0, 1fr) 150px 120px 96px; align-items: center; gap: 20px; } .hm-list-head { padding: 0 16px 10px 12px; font-family: var(--lt-f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lt-faint); } .hm-list { display: flex; flex-direction: column; gap: 8px; } .hm-srv { position: relative; padding: 10px 16px 10px 10px; border: 1px solid var(--lt-line); border-radius: 18px; background: var(--lt-paper); transition: border-color .2s, box-shadow .3s, transform .3s var(--lt-ease); } .hm-srv:hover { border-color: var(--lt-latte); box-shadow: 0 18px 40px -28px rgba(30, 34, 88, .45); transform: translateX(2px); } .hm-srv.offline { background: var(--lt-foam); } .hm-srv.offline .hm-srv-map { filter: grayscale(1); opacity: .6; } .hm-srv.tinted { border-color: color-mix(in srgb, var(--tint) 75%, var(--lt-line)); background: color-mix(in srgb, var(--tint) 26%, #fff); } .hm-srv.tinted::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 5px; border-radius: 0 3px 3px 0; background: var(--tint); } .hm-srv-map { position: relative; display: block; height: 94px; border-radius: 12px; overflow: hidden; background: var(--map, none) center / cover var(--lt-milk); filter: saturate(.85) sepia(.12); } .hm-srv-map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(30, 34, 88, .72)); } .hm-srv-map span { position: absolute; left: 9px; right: 9px; bottom: 7px; z-index: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--lt-f-mono); font-size: .7rem; color: #fff; } .hm-srv-main { min-width: 0; } .lt-body .hm-srv-title { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 6px; font-family: var(--lt-f-body); font-size: .96rem; font-weight: 800; letter-spacing: -.01em; } .hm-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lt-faint); } .hm-dot.on { background: var(--lt-ok); } .hm-dot.on::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--lt-ok); animation: lt-ping 2.4s var(--lt-ease) infinite; } .hm-game { flex: none; width: 16px; height: 16px; } .hm-srv-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lt-ink) !important; } .hm-srv-name:hover { color: var(--lt-caramel) !important; } .hm-srv-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; } .hm-country { display: inline-flex; align-items: center; gap: 6px; font-family: var(--lt-f-mono); font-size: .72rem; color: var(--lt-muted); } .hm-country img { border-radius: 2px; } .hm-srv-sub .hm-copy { height: 26px; font-size: .72rem; } .hm-srv-mapname { display: none; align-items: center; gap: 4px; font-family: var(--lt-f-mono); font-size: .72rem; color: var(--lt-muted); } .hm-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; } .hm-badge { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border-radius: 6px; font-family: var(--lt-f-mono); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .hm-badge i { font-size: 12px; } .hm-badge.b-first { color: #8a5f10; background: #f8e8c3; } .hm-badge.b-top { color: var(--lt-on-dark); background: var(--lt-espresso); } .hm-badge.b-boost { color: var(--lt-mocha); background: var(--lt-cream); } .hm-badge.b-menu { color: #4d6b3a; background: #e7efdc; } .hm-badge.b-vip { color: var(--lt-caramel); background: transparent; box-shadow: inset 0 0 0 1px var(--lt-caramel); } .hm-players { display: flex; flex-direction: column; gap: 7px; } .hm-players-num { font-family: var(--lt-f-mono); font-size: .84rem; color: var(--lt-muted); } .hm-players-num b { font-family: var(--lt-f-display); font-size: 1.1rem; font-weight: 600; color: var(--lt-ink); } .hm-players.full .hm-meter i { background: linear-gradient(90deg, #e4a08f, var(--lt-bad)); } .hm-players.full .hm-players-num b { color: var(--lt-bad); } .hm-players.lt-tick .hm-players-num b { animation: lt-tick 1.2s var(--lt-ease); } @keyframes lt-tick { 0% { color: var(--lt-caramel); transform: translateY(-3px); } 100% { color: inherit; transform: none; } } .hm-votes { display: inline-flex; align-items: center; justify-self: start; gap: 2px; padding: 3px; border: 1px solid var(--lt-line); border-radius: 12px; background: var(--lt-foam); } .hm-votes b { min-width: 30px; text-align: center; font-family: var(--lt-f-mono); font-size: .84rem; font-weight: 700; color: var(--lt-ink); } .hm-vote { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; cursor: pointer; font-size: 20px; color: var(--lt-muted); transition: background .2s, color .2s, transform .2s; } .hm-vote.up:hover { color: var(--lt-ok); background: rgba(47, 138, 87, .1); transform: translateY(-1px); } .hm-vote.down:hover { color: var(--lt-bad); background: rgba(194, 72, 58, .1); transform: translateY(1px); } .hm-vote:focus-visible { outline: 2px solid var(--lt-caramel); } .hm-srv > .hm-play { justify-self: end; padding: 0 14px; } .hm-empty { padding: 34px 16px; border: 1px dashed var(--lt-line-3); border-radius: 18px; text-align: center; color: var(--lt-muted); background: var(--lt-foam); } .hm-empty i { font-size: 20px; vertical-align: -4px; color: var(--lt-caramel); } /* încărcare automată */ .hm-more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 22px 0 0; padding: 12px; color: var(--lt-muted); font-family: var(--lt-f-mono); font-size: .74rem; letter-spacing: .06em; } .hm-more-bar { position: relative; width: 180px; height: 2px; border-radius: 2px; overflow: hidden; background: var(--lt-line); } .hm-more-bar i { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: inherit; background: var(--lt-caramel); animation: lt-load 1.1s ease-in-out infinite; } @keyframes lt-load { 0% { left: -40%; } 100% { left: 100%; } } .hm-more.done .hm-more-txt { padding: 8px 14px; border: 1px dashed var(--lt-line-3); border-radius: 99px; } /* --- despre / SEO --- */ .hm-about { margin: 10px 0 10px; padding: clamp(22px, 3.5vw, 48px); border: 1px solid var(--lt-line); border-radius: 30px; background: var(--lt-paper); box-shadow: var(--lt-shadow); } .hm-about-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 26px; } .lt-body .hm-about-head h2 { margin: 0; max-width: 820px; font-size: clamp(1.4rem, 2.8vw, 2.3rem); line-height: 1.1; letter-spacing: -.04em; } .hm-about-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 60px); } .hm-about-sec { color: var(--lt-ink-2); font-size: .94rem; line-height: 1.8; } .hm-about-sec p { margin: 0 0 14px; } .lt-body .hm-about-sec h3 { margin: 22px 0 10px; font-size: 1.02rem; } .lt-body .hm-about-sec > h3:first-child { margin-top: 0; } .hm-about-sec strong { color: var(--lt-ink); } .hm-tips { margin: 0; padding: 0; list-style: none; counter-reset: tip; } .hm-tips > li { position: relative; counter-increment: tip; padding: 16px 0 16px 56px; border-top: 1px solid var(--lt-line-2); } .hm-tips > li::before { content: "0" counter(tip); position: absolute; left: 0; top: 14px; font-family: var(--lt-f-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -.04em; color: var(--lt-latte); } .hm-tips strong { display: block; margin-bottom: 4px; color: var(--lt-ink); } .hm-tips p { margin: 0 0 6px; } .hm-tips ul { margin: 6px 0 0; padding-left: 18px; } .hm-tips ul li { margin-bottom: 4px; } .hm-tips ul li::marker { color: var(--lt-caramel); } .hm-about-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px dashed var(--lt-line-3); } .hm-about-cta > span { font-family: var(--lt-f-display); font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -.03em; color: var(--lt-ink); } /* --------------------------------------------------------------------- 5c. LISTING --------------------------------------------------------------------- */ .srv-page { color: var(--lt-ink); } .srv-page a { color: inherit; } .srv-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 6px 0 26px; padding-bottom: 18px; border-bottom: 1px solid var(--lt-line); } .srv-title { display: flex; align-items: center; gap: 14px; } .srv-title > i { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--lt-line); border-radius: 16px; font-size: 24px; color: var(--lt-caramel); background: var(--lt-paper); box-shadow: var(--lt-shadow); } .lt-body .srv-title h1 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -.03em; } .srv-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .srv-clock { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border: 1px solid var(--lt-line); border-radius: 12px; background: var(--lt-paper); color: var(--lt-muted); font-size: .8rem; white-space: nowrap; } .srv-clock i { font-size: 17px; color: var(--lt-caramel); } .srv-clock b { display: inline-block; font-family: var(--lt-f-mono); font-weight: 500; color: var(--lt-ink); font-variant-numeric: tabular-nums; } .lt-body .srv-section { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-family: var(--lt-f-mono); font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--lt-muted); } .srv-section::after { content: ""; flex: 1; height: 1px; background: var(--lt-line); } /* servicii: rânduri una sub alta */ .srv-svcs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; } .srv-svc { display: grid; grid-template-columns: 46px minmax(0, 1fr) 140px 150px 200px; align-items: center; gap: 18px; padding: 12px 18px 12px 12px; border: 1px solid var(--lt-line); border-radius: 16px; background: var(--lt-paper); transition: border-color .2s, box-shadow .25s; } .srv-svc:hover { border-color: var(--lt-latte); box-shadow: 0 14px 30px -24px rgba(30, 34, 88, .5); } .srv-svc-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; font-size: 22px; color: var(--lt-on-dark); background: var(--lt-grad); } .srv-svc-main { min-width: 0; } .srv-svc-name { display: block; font-family: var(--lt-f-display); font-size: .95rem; font-weight: 600; letter-spacing: -.02em; color: var(--lt-ink); } .srv-svc-desc { display: -webkit-box; margin-top: 3px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--lt-muted); font-size: .8rem; line-height: 1.45; } .srv-svc-cell { min-width: 0; font-family: var(--lt-f-mono); font-size: .8rem; font-weight: 500; color: var(--lt-ink); line-height: 1.35; } .srv-svc-cell > small { display: block; margin-top: 3px; font-family: var(--lt-f-body); color: var(--lt-muted); font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } @media (max-width: 1100px) { .srv-svc { grid-template-columns: 46px minmax(0, 1fr) 130px 140px; } .srv-svc-cell:last-child { grid-column: 2 / -1; } } @media (max-width: 900px) { .srv-svc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; padding: 12px; } .srv-svc-icon { grid-row: 1; grid-column: 1; width: 40px; height: 40px; font-size: 20px; } .srv-svc-main { grid-row: 1; grid-column: 1 / -1; min-height: 40px; padding-left: 52px; align-self: center; } .srv-svc-desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .srv-svc-cell, .srv-svc-cell:last-child { grid-row: 2; grid-column: auto; padding: 8px; border: 1px solid var(--lt-line-2); border-radius: 10px; background: var(--lt-foam); text-align: center; font-size: .74rem; overflow-wrap: anywhere; } } .srv-price { color: var(--lt-caramel); font-weight: 700; } .srv-inf { display: inline-block; font-size: 1.4em; line-height: .8; vertical-align: -.1em; } /* grupuri de servere */ .srv-page .margin_block_listing { margin: 0 0 22px; padding: 6px 0 0; border: 1px solid var(--lt-line); border-radius: 22px; background: var(--lt-paper); box-shadow: var(--lt-shadow); overflow: hidden; } .srv-group-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px 14px; } .srv-group-head > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; font-size: 18px; color: var(--lt-caramel); background: var(--lt-milk); } .lt-body .srv-group-head h2 { margin: 0; font-size: 1.05rem; letter-spacing: -.02em; } .srv-count { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 8px; font-family: var(--lt-f-mono); font-size: .72rem; font-weight: 700; color: var(--lt-on-dark); background: var(--lt-espresso); } .srv-group-head .srv-round { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 12px; border: 1px solid var(--lt-line); border-radius: 99px; font-size: .76rem; color: var(--lt-muted); white-space: nowrap; background: var(--lt-foam); } .srv-group-head .srv-round[hidden] { display: none; } .srv-group-head .srv-round i { font-size: 15px; color: var(--lt-caramel); } .srv-group-head .srv-round b { font-family: var(--lt-f-mono); color: var(--lt-ink); font-weight: 600; } .srv-table { border-top: 1px solid var(--lt-line); } .srv-page .srv-cols, .srv-page .server_listing_block { display: grid; align-items: center; gap: 14px; } html body .srv-page .srv-cols.srv-cols, html body .srv-page .server_listing_block.server_listing_block { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.7fr) 100px minmax(0, 1.3fr) minmax(0, 1.3fr) 104px; } .srv-page .srv-cols { padding: 10px 18px 10px 62px; border-bottom: 1px solid var(--lt-line-2); background: var(--lt-foam); font-family: var(--lt-f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lt-muted); } .srv-page .srv-cols span:last-child, .srv-page .srv-has-bumpcol .srv-cols span:nth-child(3) { text-align: center; } .srv-page .server_listing_block { position: relative; width: auto; height: auto; min-height: 50px; margin: 0; padding: 9px 18px 9px 62px; border: 0; border-bottom: 1px solid var(--lt-line-2); border-radius: 0; background: transparent; box-shadow: none; transition: background .15s; } .srv-page .server_listing_block:last-child { border-bottom: 0; } .srv-page .server_listing_block:hover { background: var(--lt-foam); } .srv-page .server_listing_block::before { content: attr(data-pos); position: absolute; left: 18px; top: 50%; transform: translateY(-50%); min-width: 30px; height: 28px; padding: 0 6px; display: grid; place-items: center; border: 1px solid var(--lt-line); border-radius: 9px; background: var(--lt-paper); font-family: var(--lt-f-mono); font-size: .74rem; font-weight: 700; color: var(--lt-muted); } .srv-page .flex_listing_info { width: auto; min-width: 0; flex: none; padding: 0; display: block; text-align: left; overflow: hidden; } .srv-page .name_listing_server { display: block; font-size: .88rem; font-weight: 700; color: var(--lt-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .srv-page .name_listing_server a:hover { color: var(--lt-caramel); } .srv-page .desp_listing_server { display: none; } .srv-page .name_listing_server img { vertical-align: -2px; border-radius: 2px; } .srv-page .srv-muted .name_listing_server { color: var(--lt-muted); font-weight: 500; font-family: var(--lt-f-mono); font-size: .78rem; } .srv-page .srv-ipcell { position: relative; cursor: copy; } .srv-page .srv-ipcell .name_listing_server { font-family: var(--lt-f-mono); font-size: .8rem; font-weight: 500; color: var(--lt-ink-2); } .srv-page .srv-ipcell:hover .name_listing_server { color: var(--lt-caramel); } .srv-page .srv-ipcell.copied::after { content: "Copied"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 2px 8px; border-radius: 6px; font-size: .68rem; font-weight: 700; color: var(--lt-on-dark); background: var(--lt-ok); } .srv-slots { font-family: var(--lt-f-mono); font-size: .86rem; font-weight: 700; color: var(--lt-ink); font-variant-numeric: tabular-nums; } .srv-slots small { font-size: inherit; font-weight: 400; color: var(--lt-muted); } .srv-empty { padding: 22px 18px; color: var(--lt-muted); font-size: .86rem; } /* coloana Bump Up */ html body .srv-page .srv-has-bumpcol .srv-cols.srv-cols, html body .srv-page .srv-has-bumpcol .server_listing_block.server_listing_block { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.7fr) 64px 100px minmax(0, 1.3fr) minmax(0, 1.3fr) 104px; } .srv-page .srv-bumpcell { display: flex !important; align-items: center; justify-content: center; min-width: 0; } @media (min-width: 901px) { .srv-page .srv-has-bumpcol .server_listing_block > * { grid-row: 1; } .srv-page .srv-has-bumpcol .server_listing_block > :nth-child(1) { grid-column: 1; } .srv-page .srv-has-bumpcol .server_listing_block > :nth-child(2) { grid-column: 2; } .srv-page .srv-has-bumpcol .server_listing_block > :nth-child(3) { grid-column: 4; } .srv-page .srv-has-bumpcol .server_listing_block > :nth-child(4) { grid-column: 5; } .srv-page .srv-has-bumpcol .server_listing_block > :nth-child(5) { grid-column: 6; } .srv-page .srv-has-bumpcol .server_listing_block > :nth-child(6) { grid-column: 7; } .srv-page .srv-has-bumpcol .server_listing_block > .srv-bumpcell { grid-column: 3; } } .srv-bump { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; cursor: pointer; line-height: 1; font-size: 18px; color: var(--lt-espresso); background: linear-gradient(140deg, #f7e1ae, #d9a548); transition: transform .25s var(--lt-ease), box-shadow .25s; } .srv-bump:hover { transform: translateY(-2px); box-shadow: 0 10px 18px -8px rgba(160, 110, 30, .7); } .srv-bump:focus-visible { outline: 2px solid var(--lt-caramel); outline-offset: 2px; } .srv-bump.locked, .srv-bump.locked:hover { cursor: not-allowed; color: var(--lt-faint); background: var(--lt-milk); transform: none; box-shadow: none; } .srv-bump[disabled] { opacity: .6; cursor: wait; } /* Connects: fiecare cifră e un chenar fix (scriptul de connects pune propriile stiluri, de aici selectoarele lungi) */ html body .srv-page .server_listing_block .flex_listing_connects_wrap.flex_listing_connects_wrap, html body .srv-page .server_listing_block .flex_listing_connects_wrap.flex_listing_connects_wrap .name_listing_server { background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; text-align: center; } html body .srv-page .server_listing_block .flex_listing_connects_wrap.flex_listing_connects_wrap .name_listing_server { display: flex !important; align-items: center !important; justify-content: center !important; height: 28px !important; overflow: hidden !important; } html body .srv-page .server_listing_block .flex_listing_connects_wrap.flex_listing_connects_wrap .flex_listing_info_connects.flex_listing_info_connects { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 28px !important; max-height: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; font-family: var(--lt-f-mono) !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; color: var(--lt-muted) !important; } html body .srv-page .server_listing_block .flex_listing_connects_wrap.flex_listing_connects_wrap .flex_listing_info_connects.flex_listing_info_connects > *:not(svg), html body .srv-page .server_listing_block .flex_listing_connects_wrap.flex_listing_connects_wrap .flex_listing_info_connects.flex_listing_info_connects:not(:has(> *)) { position: static !important; display: inline-grid !important; place-items: center !important; flex: none !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; border: 1px solid var(--lt-line) !important; border-radius: 9px !important; background: var(--lt-paper) !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; opacity: 1 !important; font-family: var(--lt-f-mono) !important; font-size: 12px !important; font-weight: 600 !important; font-style: normal !important; line-height: 1 !important; white-space: nowrap !important; color: var(--lt-ink-2) !important; } html body .srv-page .server_listing_block .flex_listing_connects_wrap.flex_listing_connects_wrap .flex_listing_info_connects.flex_listing_info_connects > * * { position: static !important; margin: 0 !important; padding: 0 !important; border: 0 !important; width: auto !important; height: auto !important; max-height: none !important; background: transparent !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; font-size: inherit !important; font-style: normal !important; line-height: inherit !important; color: inherit !important; } html body .srv-page .server_listing_block .flex_listing_connects_wrap.flex_listing_connects_wrap *::before, html body .srv-page .server_listing_block .flex_listing_connects_wrap.flex_listing_connects_wrap *::after { content: none !important; display: none !important; } html body .srv-page .server_listing_block .flex_listing_connects_wrap.flex_listing_connects_wrap .flex_listing_info_connects.flex_listing_info_connects img, html body .srv-page .server_listing_block .flex_listing_connects_wrap.flex_listing_connects_wrap .flex_listing_info_connects.flex_listing_info_connects canvas { display: none !important; } html body .srv-page .server_listing_block .flex_listing_connects_wrap.flex_listing_connects_wrap .flex_listing_info_connects.flex_listing_info_connects svg { width: 14px !important; height: 14px !important; color: var(--lt-caramel) !important; flex: none !important; } /* butoanele de connects (oriunde apar: Listing, pagina serverului) */ html body :has(> .uk-button-mini-connects) { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 6px !important; height: auto !important; max-height: none !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } html body .uk-button-mini-connects.uk-button-mini-connects, html body .uk-button-mini-connects.uk-button-mini-connects:hover, html body .uk-button-mini-connects.uk-button-mini-connects:focus, html body .uk-button-mini-connects.uk-button-mini-connects:active { all: unset; box-sizing: border-box !important; display: inline-grid !important; place-items: center !important; flex: none !important; width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 26px !important; min-height: 26px !important; max-height: 26px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid var(--lt-line) !important; border-radius: 8px !important; background: var(--lt-paper) !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; transform: none !important; opacity: 1 !important; font-family: var(--lt-f-mono) !important; font-size: 12px !important; font-weight: 600 !important; font-style: normal !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; color: var(--lt-ink) !important; cursor: pointer !important; } html body .uk-button-mini-connects.uk-button-mini-connects:hover { border-color: var(--lt-caramel) !important; color: var(--lt-caramel) !important; } html body .uk-button-mini-connects.uk-button-mini-connects * { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; } html body .uk-button-mini-connects.uk-button-mini-connects::before, html body .uk-button-mini-connects.uk-button-mini-connects::after { content: none !important; display: none !important; } html body .flex_listing_connects_wrap .name_listing_server:has(.uk-button-mini-connects) { height: 28px !important; overflow: visible !important; } /* --------------------------------------------------------------------- 5d. PAGINA SERVERULUI --------------------------------------------------------------------- */ .si-page { color: var(--lt-ink); } .si-page a { color: inherit; } .si-hr { display: none; } .si-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: clamp(18px, 3vw, 40px); align-items: stretch; margin-bottom: 20px; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--lt-line); border-radius: 28px; background: var(--lt-paper); box-shadow: var(--lt-shadow-lift); } .si-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(500px 260px at 0% 0%, var(--lt-cream), transparent 70%); } .si-hero-copy { min-width: 0; display: flex; flex-direction: column; } .si-hero-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .si-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--lt-line); border-radius: 99px; font-size: .74rem; font-weight: 700; color: var(--lt-ink-2); background: var(--lt-paper); } .si-pill img { width: 16px; height: 16px; } .si-pill.ok { color: var(--lt-ok); border-color: rgba(47, 138, 87, .25); background: rgba(47, 138, 87, .07); } .si-pill.bad { color: var(--lt-bad); border-color: rgba(194, 72, 58, .25); background: rgba(194, 72, 58, .07); } .si-pill.warn { color: var(--lt-warn); border-color: rgba(168, 118, 24, .3); background: rgba(168, 118, 24, .08); } .si-pill.ok::before, .si-pill.bad::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .lt-body .si-title { margin: 0 0 12px; font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1.1; letter-spacing: -.04em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .si-addr { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--lt-line); border-radius: 12px; background: var(--lt-foam); color: var(--lt-ink-2); font-family: var(--lt-f-mono); font-size: .86rem; cursor: copy; transition: border-color .2s, color .2s; } .si-addr:hover { border-color: var(--lt-caramel); color: var(--lt-ink); } .si-addr i { color: var(--lt-caramel); } .si-addr.copied::after { content: "Copied"; margin-left: 4px; padding: 1px 7px; border-radius: 6px; font-family: var(--lt-f-body); font-size: .68rem; font-weight: 700; color: var(--lt-on-dark); background: var(--lt-ok); } .si-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: auto; padding-top: 22px; } .si-stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px; border: 1px solid var(--lt-line); border-radius: 14px; background: var(--lt-paper); font-family: var(--lt-f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lt-muted); } .si-stat > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--lt-f-display); font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; text-transform: none; color: var(--lt-ink); font-variant-numeric: tabular-nums; } .si-stat > b small { font-size: .8em; font-weight: 400; color: var(--lt-muted); } .si-rate { display: flex; align-items: center; gap: 6px; } .si-rate b { min-width: 26px; text-align: center; font-family: var(--lt-f-display); font-size: 1.1rem; font-weight: 600; letter-spacing: 0; color: var(--lt-ink); } .si-vote { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--lt-line); border-radius: 9px; cursor: pointer; font-size: 20px; color: var(--lt-muted); transition: background .2s, border-color .2s, color .2s; } .si-vote.up:hover { color: var(--lt-ok); border-color: var(--lt-ok); background: rgba(47, 138, 87, .08); } .si-vote.down:hover { color: var(--lt-bad); border-color: var(--lt-bad); background: rgba(194, 72, 58, .08); } .si-vote:focus-visible { outline: 2px solid var(--lt-caramel); outline-offset: 2px; } .connects_wrapper .connects { display: inline-flex; align-items: center; font-family: var(--lt-f-display); font-size: 1.1rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--lt-ink); } .connects_wrapper .connects svg { width: 18px; height: 18px; color: var(--lt-caramel); } .si-shot { position: relative; isolation: isolate; min-height: 220px; margin: 0; border-radius: 20px; overflow: hidden; background: var(--map, none) center / cover var(--lt-milk); } .si-shot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 50%, rgba(30, 34, 88, .72)); } .si-shot::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 12px; pointer-events: none; } .si-shot figcaption { position: absolute; left: 22px; right: 22px; bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #fff; font-size: .9rem; } .si-shot-tag { padding: 3px 8px; border-radius: 6px; font-family: var(--lt-f-mono); font-size: .62rem; letter-spacing: .14em; color: var(--lt-espresso); background: var(--lt-latte); } .si-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; } .si-card { margin-bottom: 20px; border: 1px solid var(--lt-line); border-radius: 22px; background: var(--lt-paper); box-shadow: var(--lt-shadow); overflow: hidden; } .si-card-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--lt-line-2); } .si-card-head > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-size: 17px; color: var(--lt-caramel); background: var(--lt-milk); } .lt-body .si-card-head h2 { margin: 0; font-size: 1rem; } .si-card-head small { margin-left: auto; font-family: var(--lt-f-mono); font-size: .76rem; color: var(--lt-muted); } .si-kvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: -1px; } .si-kv { min-width: 0; padding: 14px 20px; border-bottom: 1px solid var(--lt-line-2); } .si-kv:nth-child(odd) { border-right: 1px solid var(--lt-line-2); } .si-k { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-family: var(--lt-f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lt-muted); } .si-k i { font-size: 14px; color: var(--lt-caramel); } .si-v { font-size: .9rem; font-weight: 600; color: var(--lt-ink); overflow-wrap: anywhere; } .si-v img { vertical-align: -3px; border-radius: 2px; } .si-page .si-link { color: var(--lt-caramel); font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .si-page .si-link:hover { color: var(--lt-ink); } .si-svc-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--lt-line-2); } .si-svc-row:last-child { border-bottom: 0; } .si-svc-row > i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; font-size: 18px; color: var(--lt-on-dark); background: var(--lt-grad); } .si-svc-name { font-size: .9rem; font-weight: 800; } .si-svc-det { display: block; color: var(--lt-muted); font-size: .78rem; } .si-svc-row .si-pill { margin-left: auto; flex: none; font-family: var(--lt-f-mono); font-weight: 500; } .si-empty { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 18px 20px; } .si-empty-text { display: flex; flex-direction: column; gap: 2px; } .si-empty-text span { color: var(--lt-ink); font-weight: 800; } .si-empty-text span i { color: var(--lt-bad); } .si-empty-text small { color: var(--lt-muted); font-size: .8rem; } /* jucători */ .si-players-scroll { overflow: visible; } .si-page #players_list { width: 100%; margin: 0; background: transparent; border-collapse: collapse; } .si-page #players_list th { padding: 10px 20px !important; border: 0; border-bottom: 1px solid var(--lt-line); background: var(--lt-foam); color: var(--lt-muted); font-family: var(--lt-f-mono); font-size: .64rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-align: left; } .si-page #players_list td { padding: 9px 20px !important; border: 0; border-bottom: 1px solid var(--lt-line-2); background: transparent; color: var(--lt-ink-2); font-size: .88rem; line-height: 1.5; } .si-page #players_list tbody tr:last-child td { border-bottom: 0; } .si-page #players_list tbody tr:hover td { background: var(--lt-foam); } .si-page #players_list td:first-child { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .si-page #players_list th:nth-child(n+2), .si-page #players_list td:nth-child(n+2) { text-align: right; white-space: nowrap; font-family: var(--lt-f-mono); font-size: .8rem; } .si-page .player_server > :not(.si-card-head):not(.si-players-scroll), .si-page .player_server .si-players-scroll > :not(table), .si-page .player_server .uk-alert { display: table !important; width: auto !important; max-width: calc(100% - 32px); margin: 12px auto 14px !important; padding: 6px 14px !important; border-radius: 99px !important; font-size: .76rem !important; line-height: 1.5 !important; text-align: center; } .si-page .player_server .uk-alert img, .si-page .player_server .si-players-scroll > :not(table) img { max-height: 14px; vertical-align: -2px; } .si-page .player_server .uk-alert > *, .si-page .player_server > :not(.si-card-head):not(.si-players-scroll) > *, .si-page .player_server .si-players-scroll > :not(table) > *, .si-page #players_list tfoot td > * { display: inline-block; margin: 0 5px !important; vertical-align: middle; } .si-page #players_list tfoot td { padding: 10px 14px !important; font-size: .76rem; text-align: center; color: var(--lt-muted); } .si-page #players_list tbody { counter-reset: si-rank; } .si-page #players_list tbody tr:not(#empty) { counter-increment: si-rank; } .si-page #players_list tbody tr:not(#empty) td:first-child::before { content: counter(si-rank); display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; margin-right: 12px; padding: 0 5px; border: 1px solid var(--lt-line); border-radius: 8px; vertical-align: middle; font-family: var(--lt-f-mono); font-size: .72rem; font-weight: 700; color: var(--lt-muted); background: var(--lt-paper); } /* seo + widget */ .si-seo { margin-bottom: 20px; padding: clamp(18px, 3vw, 30px); border: 1px solid var(--lt-line); border-left: 3px solid var(--lt-caramel); border-radius: 22px; background: var(--lt-foam); color: var(--lt-ink-2); font-size: .94rem; line-height: 1.8; } .lt-body .si-seo h2 { margin: 0 0 12px; font-size: 1.1rem; } .si-seo p { margin: 0 0 10px; } .si-seo p:last-child { margin-bottom: 0; } .seo-highlight { color: var(--lt-mocha) !important; font-weight: 800; } .si-preview { padding: 20px; overflow-x: auto; background: repeating-linear-gradient(135deg, var(--lt-foam) 0 12px, var(--lt-paper) 12px 24px); border-bottom: 1px solid var(--lt-line-2); } .si-preview a { display: inline-block; } .si-code { padding: 16px 20px 0; } .si-code:last-child { padding-bottom: 20px; } .si-code label { display: block; margin-bottom: 7px; font-family: var(--lt-f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lt-muted); } .si-code-row { display: flex; gap: 10px; } .lt-body .si-code-row textarea { flex: 1; min-width: 0; height: 42px; margin: 0; padding: 11px 12px; border: 1px solid var(--lt-line); border-radius: 12px; background: var(--lt-foam); color: var(--lt-ink-2); font-family: var(--lt-f-mono); font-size: .76rem; resize: none; white-space: nowrap; overflow: hidden; outline: none; } .lt-body .si-code-row textarea:focus { border-color: var(--lt-caramel); } .si-page .si-grid.flex_server { display: grid; flex-wrap: nowrap; margin: 0 0 20px; } .si-page .server_podrobnee, .si-page .player_server { flex: none; min-width: 0; width: auto; } .si-page .si-grid > .server_podrobnee, .si-page .si-grid > .player_server { position: sticky; top: 92px; align-self: start; margin: 0 !important; padding: 0 !important; } .si-page .player_server > .si-card-head { margin: 0; width: 100%; } .si-page .player_server .si-players-scroll { margin: 0; padding: 0; } .si-page .si-grid > .server_podrobnee > :first-child { margin-top: 0 !important; } .si-page .si-grid > .server_podrobnee > :last-child { margin-bottom: 0 !important; } .si-page .si-kvs.dop_info_server { display: grid; padding: 0; margin: 0 0 -1px; background: transparent; border: 0; } .si-page .si-card.uslugi { padding: 0; margin: 0 0 20px; } .si-page .si-card.widget-section { margin: 0 0 20px; padding: 0; } /* --------------------------------------------------------------------- 5e. SERVICII (cabinet/services — conținut încărcat prin AJAX) --------------------------------------------------------------------- */ .svx { --ink: var(--lt-ink); --muted: var(--lt-muted); --violet: var(--lt-caramel); --blue: var(--lt-mocha); --accent: var(--lt-caramel); --soft: var(--lt-mocha); --card: var(--lt-paper); --card-2: var(--lt-foam); --line: var(--lt-line); --line-2: var(--lt-line-2); --ok: var(--lt-ok); --bad: var(--lt-bad); --warn: var(--lt-warn); color: var(--ink); } .svx *, .svx *::before, .svx *::after { box-sizing: border-box; } .svx a { color: inherit; text-decoration: none; } /* radio/checkbox ascunse vizual, dar accesibile din tastatură */ .svx input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } /* ---------- Header pagină ---------- */ .svx #header_div { margin: 0 0 16px; padding: 0; border: 0; } .svx #header_div h1 { display: flex; align-items: center; gap: 10px; margin: 0 !important; font-size: 1.5rem !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--lt-ink) !important; } .svx #spinner { font-size: 18px; color: var(--soft); } /* ---------- Titluri secțiuni ---------- */ .svx-title { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; font-size: .98rem; font-weight: 650; color: var(--ink); } .svx-title:first-child { margin-top: 0; } .svx-title i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; font-size: 15px; color: var(--lt-on-dark); background: var(--lt-grad); } .svx-title small { margin-left: auto; color: var(--muted); font-size: .74rem; font-weight: 500; } #methods_periods { margin-top: 22px; } .svx #service_prolong #methods_periods, #service_period + #methods_periods { margin-top: 0; } .svx-hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; } .svx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 99px; font-size: .74rem; font-weight: 600; color: var(--soft); background: rgba(91, 103, 200, 0.1); white-space: nowrap; } .svx-pill.ok { color: var(--ok); background: rgba(47, 138, 87, .14); } .svx-pill.bad { color: var(--bad); background: rgba(194, 72, 58, .14); } .svx-pill.ok::before, .svx-pill.bad::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .svx-empty { padding: 22px 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; font-size: .88rem; } .svx-empty i { display: block; margin-bottom: 6px; font-size: 26px; color: var(--accent); } /* ---------- Bara server / serviciu (#return_block) ---------- */ .svx #return_block { font-size: .9rem !important; line-height: 1.4 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; padding: 0; font-size: .9rem; font-weight: 400; text-align: left !important; } .svx #return_block > p { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 8px 7px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--card-2); color: var(--ink); max-width: 100%; } .svx #return_block > p b { color: var(--muted); font-weight: 500; } .svx #return_block > p i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px !important; color: var(--soft); background: rgba(91, 103, 200, 0.11); transition: background .15s, color .15s; } .svx #return_block > p i:hover { background: rgba(91, 103, 200, 0.22); color: var(--lt-ink); } /* ---------- Carduri selectabile (generic) ---------- */ .svx-opt { position: relative; display: block; min-width: 0; margin: 0; cursor: pointer; } .svx-card { position: relative; display: block; height: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--card); transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; } .svx-opt:hover .svx-card { border-color: rgba(91, 103, 200, 0.28); transform: translateY(-1px); } .svx-opt input:focus-visible + .svx-card { outline: 2px solid var(--accent); outline-offset: 2px; } .svx-opt input:checked + .svx-card { border-color: var(--blue); background: linear-gradient(135deg, rgba(107, 121, 219, 0.14), rgba(91, 103, 200, 0.09)); box-shadow: 0 0 0 1px var(--blue), 0 8px 22px rgba(30, 34, 88, .45); } /* bifă în colț pe cardul ales */ .svx-opt input:checked + .svx-card::after { content: "\2713"; position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--lt-on-dark); background: var(--lt-grad); box-shadow: 0 2px 8px rgba(30, 34, 88, .45); } .svx-opt input:disabled + .svx-card { cursor: not-allowed; opacity: .55; transform: none; border-style: dashed; } /* ---------- Lista de servere ---------- */ .svx-servers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .svx-server { display: flex; align-items: center; gap: 12px; padding: 14px 16px; } .svx-server > i { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; font-size: 20px; color: var(--soft); background: rgba(91, 103, 200, 0.09); } .svx-server-main { min-width: 0; flex: 1; } .svx-server-name { display: block; font-size: .92rem; font-weight: 600; color: var(--lt-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .svx-server-addr { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--muted); font-size: .8rem; } .svx-server-addr img { border-radius: 2px; } .svx-server > .bx-chevron-right { width: auto; height: auto; background: none; font-size: 22px; color: var(--muted); transition: transform .15s, color .15s; } .svx-opt:hover .svx-server > .bx-chevron-right { color: var(--lt-ink); transform: translateX(3px); } /* ---------- Servicii (active / de cumpărat) ---------- */ .svx-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .svx-tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; } .svx-tile { min-height: 84px; } /* poza serviciului: se vede întreagă, fără tăieturi */ .svx-tile img { flex: none; display: block; width: 64px !important; height: 64px !important; max-width: none !important; margin: 0 !important; padding: 6px; border-radius: 12px; object-fit: contain !important; object-position: center; background: var(--lt-milk); box-shadow: inset 0 0 0 1px var(--line); } .svx-tile-main { min-width: 0; } .svx-tile-name { display: block; font-size: .9rem; font-weight: 650; color: var(--lt-ink); } .svx-tile-det { display: block; margin-top: 2px; color: var(--muted); font-size: .78rem; line-height: 1.45; } .svx-tile-det b { color: var(--soft); font-weight: 600; } /* ---------- Perioade / runde ---------- */ #service_period .svx-periods { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; } .svx-period { padding: 14px 12px 12px; text-align: center; } .svx-period-num { display: block; font-size: 1.7rem; font-weight: 750; line-height: 1; color: var(--lt-ink); font-variant-numeric: tabular-nums; } .svx-period-unit { display: block; margin-top: 4px; color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .svx-period-price { display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 99px; font-size: .8rem; font-weight: 650; color: var(--soft); background: rgba(91, 103, 200, 0.09); font-variant-numeric: tabular-nums; } .svx-opt input:checked + .svx-period .svx-period-price { color: var(--lt-on-dark); background: var(--lt-grad); } /* ---------- Poziții TOP / BE FIRST ---------- */ .svx-pos { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 10px; } .svx-pos-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; text-align: center; } .svx-pos-num { font-size: 1.25rem; font-weight: 750; color: var(--lt-ink); font-variant-numeric: tabular-nums; } .svx-pos-num small { margin-right: 1px; font-size: .75em; color: var(--muted); } .svx-pos-cell .svx-pill { font-size: .68rem; padding: 2px 9px; } .svx-pos-until { color: var(--muted); font-size: .68rem; line-height: 1.35; } /* ---------- Culori ---------- */ .svx-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; } .svx-color { padding: 8px; text-align: center; } .svx-swatch { display: block; height: 46px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(30, 34, 88, .15); } .svx-color-name { display: block; margin-top: 6px; color: var(--muted); font-size: .74rem; font-weight: 600; } .svx-opt input:checked + .svx-color .svx-color-name { color: var(--lt-ink); } /* ---------- Previzualizare server ---------- */ .svx-preview { display: grid; grid-template-columns: 26px minmax(0, 2fr) minmax(0, 1.4fr) auto auto auto; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: .86rem; color: var(--lt-ink); text-shadow: none; transition: background-color .25s; } .svx-preview img { vertical-align: -3px; border-radius: 2px; } .svx-preview-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .svx-preview-cell { white-space: nowrap; font-variant-numeric: tabular-nums; } .svx-preview-cell small { display: block; color: inherit; opacity: .7; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; } .svx-preview-cell .bx { font-size: 15px; vertical-align: -2px; } /* ---------- Metode de plată ---------- */ .svx-pay { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .svx-pay-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; } /* JS-ul vechi pune opacity pe imagini/text – lăsăm design-ul să decidă */ .svx-pay-card img, .svx-pay-card .svx-pay-txt { opacity: 1 !important; } .svx-pay-card img { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: contain; background: var(--lt-milk); padding: 4px; } .svx-pay-txt { min-width: 0; margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.5; } .svx-pay-txt b { display: block; font-size: .9rem; color: var(--lt-ink); } .svx-pay-txt strong { color: var(--soft); font-weight: 650; } .svx-alert { padding: 12px 16px; border: 1px solid rgba(183, 130, 31, .35); border-radius: 12px; background: rgba(183, 130, 31, .08); color: var(--warn); font-size: .86rem; text-align: center; } /* ---------- Captcha ---------- */ .svx-captcha { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); } .svx-captcha #paycim { cursor: pointer; line-height: 0; } .svx-captcha #paycim img { border-radius: 6px; } /* ---------- Formulare ---------- */ .svx-input, .svx select, .svx input[type="text"] { height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--lt-foam); color: var(--ink); font-size: .86rem; outline: none; transition: border-color .15s, box-shadow .15s; } .svx select option { background: var(--lt-paper); color: var(--ink); } /* tema forțează input/select (246px, padding mare, fundal propriu) – le readucem la design-ul nou */ .svx input[type="text"], .svx select, .svx .svx-input { box-sizing: border-box !important; width: auto !important; max-width: 100%; height: 38px !important; padding: 0 12px !important; margin: 0 !important; border: 1px solid var(--line) !important; border-radius: 8px !important; background-color: var(--lt-foam) !important; color: var(--ink) !important; font-family: inherit !important; font-size: .86rem !important; font-weight: 500 !important; line-height: 36px !important; } .svx select { padding-right: 28px !important; } .svx-row-ctrl .svx-input, .svx-row-ctrl select { flex: 1 1 0; min-width: 0; width: 0 !important; } .svx-row-ctrl .svx-btn, .svx-row-ctrl .svx-switch { flex: none; } .svx-captcha input { flex: 1 1 160px; width: auto !important; } .svx-input:focus, .svx select:focus, .svx input[type="text"]:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(91, 103, 200, 0.1); } .svx input::placeholder { color: rgba(143, 122, 105, .7); } .svx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 18px; border: 0; border-radius: 8px; cursor: pointer; font-size: .78rem; font-weight: 700; letter-spacing: .02em; text-transform: none; white-space: nowrap; color: var(--lt-on-dark); background: var(--lt-grad); transition: transform .15s, box-shadow .15s, opacity .15s; } .svx-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(30, 34, 88, .45); color: var(--lt-on-dark); background: var(--lt-caramel); } .svx-btn:disabled { opacity: .55; cursor: wait; transform: none; box-shadow: none; } .svx-btn.ghost { color: var(--soft); background: rgba(91, 103, 200, 0.09); box-shadow: inset 0 0 0 1px var(--line); } .svx-btn.ghost:hover { color: var(--lt-ink); background: rgba(91, 103, 200, 0.17); box-shadow: inset 0 0 0 1px rgba(91, 103, 200, 0.22); } /* ---------- Total + Plătește ---------- */ .svx #calculate_sum { margin: 18px 0 0; padding: 12px 16px !important; border: 1px solid rgba(47, 138, 87, .3); border-radius: 12px; background: rgba(47, 138, 87, .08); color: #24563a; font-size: .9rem; font-weight: 600; text-align: center; } .svx #service_pay { width: 100%; height: 46px; margin-top: 12px; font-size: .86rem; } .svx #go_to_payment_system { margin-top: 12px; } /* ---------- Gestionare serviciu ---------- */ .svx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; } .svx-stat { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); } .svx-stat span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .72rem; } .svx-stat b { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 1.05rem; font-weight: 650; color: var(--lt-ink); font-variant-numeric: tabular-nums; } .svx-stat b small { font-size: .8em; font-weight: 500; color: var(--muted); } .svx-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(30, 34, 88, .15); } .svx-bar { height: 6px; margin-top: 10px; border-radius: 99px; background: rgba(91, 103, 200, 0.09); overflow: hidden; } .svx-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--blue)); } .svx-panel { border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; } .svx-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--line-2); } .svx-row:last-child { border-bottom: 0; } .svx-row-label { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; min-width: 0; } .svx-row-label > i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; font-size: 17px; color: var(--soft); background: rgba(91, 103, 200, 0.09); } .svx-row-label b { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); } .svx-row-label small { display: block; color: var(--muted); font-size: .74rem; } .svx-row-ctrl { display: flex; align-items: center; gap: 8px; flex: 1 1 280px; justify-content: flex-end; } .svx-row-ctrl .svx-input, .svx-row-ctrl select { flex: 1; min-width: 0; } /* comutator auto-reînnoire */ .svx-switch { position: relative; display: inline-block; flex: none; width: 44px; height: 24px; cursor: pointer; } .svx-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; } .svx-switch span { position: absolute; inset: 0; border-radius: 99px; background: rgba(91, 103, 200, 0.14); transition: background .2s; } .svx-switch span::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(30, 34, 88, .3); } .svx-switch input:checked + span { background: var(--lt-grad); } .svx-switch input:checked + span::before { transform: translateX(20px); } .svx-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } /* mesaj de confirmare la schimbarea IP (#alert) */ .svx #alert { margin-bottom: 14px; } .svx #alert .uk-alert { margin: 0; padding: 12px 16px; border: 1px solid rgba(91, 103, 200, 0.2); border-radius: 12px; background: rgba(91, 103, 200, 0.06); color: var(--ink); cursor: pointer; } /* panou reînnoire (#service_prolong) */ .svx #service_prolong { margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); } .svx-prolong-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .svx-prolong-head .svx-title { margin: 0; } .svx-close { all: unset; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 18px; color: var(--muted); background: rgba(91, 103, 200, 0.08); } .svx-close:hover { color: var(--lt-ink); background: rgba(91, 103, 200, 0.17); } @media (max-width: 760px) { .svx-servers, .svx-tiles { grid-template-columns: 1fr; } .svx-pos { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } .svx-preview { grid-template-columns: 26px minmax(0, 1fr) auto; } .svx-preview .svx-hide-sm { display: none; } .svx-row-ctrl { flex-basis: 100%; } .svx-row { gap: 10px; padding: 12px; } .svx-row-ctrl .svx-btn { padding: 0 12px; } #return_block > p { border-radius: 12px; } .svx-preview { gap: 10px; padding: 10px 12px; } .svx-pay { grid-template-columns: 1fr; } .svx #service_pay { height: 44px; } } /* --------------------------------------------------------------------- 5f. JUCĂTORI ONLINE (pages → online_players.tpl) --------------------------------------------------------------------- */ .op-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; } .op-stat { flex: 1 1 160px; padding: 14px 18px; border: 1px solid var(--b-line); border-radius: 14px; background: var(--b-card); } .op-stat b { display: block; font-size: 1.6rem; line-height: 1.1; color: var(--lt-ink); } .op-stat span { font-size: .74rem; color: var(--b-muted); text-transform: uppercase; letter-spacing: .06em; } .op-stat .op-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--b-ok); box-shadow: 0 0 0 3px rgba(47, 138, 87, .2); vertical-align: middle; } .op-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; } .op-tools input { flex: 1 1 220px; height: 38px !important; margin: 0; padding: 0 14px !important; box-sizing: border-box !important; border: 1px solid var(--b-line) !important; border-radius: 10px; background: var(--lt-foam) !important; color: var(--b-ink) !important; font: inherit; font-size: .82rem; outline: none; } .op-tools input:focus { border-color: var(--b-blue) !important; } .op-tools small { color: var(--b-muted); font-size: .74rem; } .op-table { width: 100%; border-collapse: collapse; font-size: .82rem; } .op-table th { padding: 10px 12px; text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--b-soft); border-bottom: 1px solid var(--b-line); } .op-table td { padding: 10px 12px; border-bottom: 1px solid var(--b-line-2); color: var(--b-ink); vertical-align: middle; } .op-table tr:hover td { background: rgba(91, 103, 200, 0.03); } .op-num { width: 40px; color: var(--b-muted) !important; } .op-name { font-weight: 650; word-break: break-word; } .op-name img { width: 18px; height: 12px; margin-right: 8px; vertical-align: -1px; border-radius: 2px; } .op-name.op-anon { color: var(--b-muted); font-style: italic; font-weight: 500; } .op-server a { color: var(--b-soft) !important; font-weight: 600; } .op-server a:hover { color: var(--lt-ink) !important; } .op-server small { display: block; color: var(--b-muted); font-size: .72rem; } .op-map, .op-time { color: var(--b-muted) !important; white-space: nowrap; } .op-empty { padding: 30px 12px !important; text-align: center; color: var(--b-muted) !important; } @media (max-width: 700px) { .op-table thead { display: none; } .op-table, .op-table tbody, .op-table tr, .op-table td { display: block; width: 100%; } .op-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 4px; border-bottom: 1px solid var(--b-line-2); } .op-table td { padding: 0; border: 0; } .op-num { display: none !important; } .op-name { grid-column: 1; } .op-time { grid-column: 2; grid-row: 1; text-align: right; } .op-server { grid-column: 1 / -1; } .op-map { grid-column: 1 / -1; font-size: .74rem; } .op-table tr:hover td { background: none; } } /* retușuri peste stilurile mutate */ .op-stat { position: relative; border-radius: 18px !important; box-shadow: var(--lt-shadow); } .op-stat b { font-family: var(--lt-f-display); font-weight: 600; letter-spacing: -.03em; } .op-stat span { font-family: var(--lt-f-mono); } .op-table th { font-family: var(--lt-f-mono); font-weight: 500 !important; color: var(--lt-muted) !important; } .op-tools input { height: 44px !important; border-radius: 12px !important; background: var(--lt-paper) !important; } .op-tools input:focus { border-color: var(--lt-caramel) !important; box-shadow: 0 0 0 4px rgba(107, 121, 219, .14); } .svx-card { border-radius: 16px; } .svx-period-num { font-family: var(--lt-f-display); font-weight: 600; letter-spacing: -.03em; } .svx-pos-num { font-family: var(--lt-f-mono); } .svx-stat b, .svx-period-price, .svx-pos-until, .svx-server-addr { font-family: var(--lt-f-mono); } .svx-stat span { font-family: var(--lt-f-mono); letter-spacing: .08em; text-transform: uppercase; font-size: .64rem; } .svx #calculate_sum { border-radius: 14px; } .svx-title { font-family: var(--lt-f-display); font-weight: 600; letter-spacing: -.02em; } .lt-body .svx #header_div h1 { font-size: clamp(1.5rem, 2.6vw, 2.2rem) !important; font-weight: 600 !important; letter-spacing: -.03em; } .svx #header_div { padding-bottom: 18px !important; margin-bottom: 22px !important; border-bottom: 1px solid var(--lt-line) !important; } .svx-opt input:checked + .svx-card { background: var(--lt-foam); border-color: var(--lt-caramel); box-shadow: 0 0 0 1px var(--lt-caramel), 0 18px 34px -22px rgba(30, 34, 88, .45); } .svx-opt input:checked + .svx-card::after { background: var(--lt-caramel); } /* --------------------------------------------------------------------- 6. EFECTE --------------------------------------------------------------------- */ /* apariție la scroll (clasele sunt puse din latte.js doar pe ce e sub ecran) */ .lt-rv { opacity: 0; transform: translateY(22px); } .lt-rv.lt-in { opacity: 1; transform: none; transition: opacity .7s var(--lt-ease) var(--d, 0s), transform .8s var(--lt-ease) var(--d, 0s); } .hm-srv.lt-rv { transform: translateY(14px); } /* număr care se schimbă live */ .lt-flash { animation: lt-flash 1.4s var(--lt-ease); } @keyframes lt-flash { 0% { background-color: rgba(195, 202, 248, .55); } 100% { background-color: transparent; } } /* --------------------------------------------------------------------- 7. ECRANE MAI MICI --------------------------------------------------------------------- */ /* desktop: bara laterală fixă, conținutul pe tot restul ecranului */ @media (min-width: 1180px) { .lt-stage { margin-left: var(--lt-rail); } } @media (min-width: 1800px) { :root { --lt-rail: 280px; } html { font-size: 16px; } } /* tabletă și telefon: bara laterală devine sertar */ @media (max-width: 1179px) { .lt-rail { transform: translateX(-104%); width: min(320px, 86vw); background: rgba(255, 255, 255, .96); box-shadow: 30px 0 60px -30px rgba(30, 34, 88, .45); transition: transform .45s var(--lt-ease); } .lt-rail-close { display: inline-grid !important; } .lt-burger { display: inline-grid !important; } .lt-brand-sm { display: inline-flex !important; } body.lt-drawer .lt-rail { transform: none; } .lt-scrim { position: fixed; inset: 0; z-index: 850; display: block; background: rgba(30, 34, 88, .34); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .35s; } body.lt-drawer .lt-scrim { opacity: 1; pointer-events: auto; } body.lt-drawer { overflow: hidden; } .lt-nav a.active::before { display: none; } .lt-rail-cta { margin-top: 18px; } .hm-svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm-hero { grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); } .lt-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lt-foot-brand { grid-column: 1 / -1; } } @media (max-width: 1100px) { .hm-list-head { display: none; } .hm-srv { grid-template-columns: 130px minmax(0, 1fr) 130px auto; gap: 14px; } .hm-srv-map { height: 76px; } .hm-srv > .hm-votes { display: none; } .si-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { .si-grid { grid-template-columns: 1fr; } .si-page .si-grid > .server_podrobnee, .si-page .si-grid > .player_server { position: static; } .hm-hero { grid-template-columns: 1fr; } .hm-scope { flex-direction: row; align-items: center; } .hm-radar { width: 150px; flex: none; } .hm-telemetry { flex: 1; grid-template-columns: 1fr; border-top: 0; border-left: 1px solid rgba(195, 202, 248, .2); } .hm-telemetry > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0 8px 18px; text-align: left; } .hm-telemetry > div + div { border-left: 0; border-top: 1px solid rgba(195, 202, 248, .2); } .hm-about-cols { grid-template-columns: 1fr; } .lt-cab-id { grid-template-columns: auto minmax(0, 1fr) auto; } .lt-cab-id > .b-btn { grid-column: 1 / -1; } .si-hero { grid-template-columns: 1fr; } .si-shot { min-height: 160px; order: -1; } } /* listing pe ecrane mici: fiecare server pe 3 rânduri compacte */ @media (max-width: 900px) { .srv-page .srv-cols { display: none !important; } .srv-page .server_listing_block { padding: 12px 14px 12px 54px; } .srv-page .server_listing_block::before { left: 12px; top: 14px; transform: none; } html body .srv-page .server_listing_block.server_listing_block { grid-template-columns: minmax(0, 1fr) auto auto !important; grid-template-areas: "name name name" "ip ip conn" "map extra slots" !important; gap: 6px 10px !important; } html body .srv-page .srv-has-bumpcol .server_listing_block.server_listing_block { grid-template-areas: "name name bump" "ip ip conn" "map extra slots" !important; } .srv-page .server_listing_block > .flex_listing_info:nth-child(1) { grid-area: name; } .srv-page .server_listing_block > .flex_listing_info:nth-child(2) { grid-area: ip; } .srv-page .server_listing_block > .flex_listing_info:nth-child(3) { grid-area: slots; text-align: right; } .srv-page .server_listing_block > .flex_listing_info:nth-child(4) { grid-area: map; } .srv-page .server_listing_block > .flex_listing_info:nth-child(5) { grid-area: extra; text-align: right; } .srv-page .server_listing_block > .flex_listing_info:nth-child(6) { grid-area: conn; } .srv-page .srv-has-bumpcol .server_listing_block > .srv-bumpcell { grid-area: bump; } .srv-page .server_listing_block > .flex_listing_info:nth-child(1) .name_listing_server { font-size: .92rem; } html body .srv-page .server_listing_block .flex_listing_connects_wrap.flex_listing_connects_wrap .name_listing_server { justify-content: flex-end !important; } .srv-group-head { flex-wrap: wrap; } .srv-group-head .srv-round { margin-left: 0; } } /* telefon */ @media (max-width: 760px) { html { font-size: 14.5px; } .lt-main { padding: 4px 14px calc(96px + env(safe-area-inset-bottom)); } .lt-top { gap: 8px; padding: 10px 14px; } .lt-top .lt-search { display: none; } .lt-top.search-open .lt-search { position: absolute; left: 14px; right: 14px; top: 10px; display: block; max-width: none; z-index: 2; } .lt-brand-sm .lt-brand-word { font-size: .92rem; } .lt-user-txt, .lt-hide-xs { display: none !important; } .lt-user-chip { padding: 3px; } .lt-user .b-btn.sm span { display: none; } .lt-user .b-btn.sm { width: 40px; padding: 0; } .lt-search-btn { display: inline-grid !important; } .lt-dock { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 820; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; padding: 6px; border: 1px solid var(--lt-line); border-radius: 22px; background: rgba(255, 255, 255, .97); box-shadow: 0 20px 40px -18px rgba(30, 34, 88, .45); } .lt-dock a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 14px; font-size: .64rem; font-weight: 700; color: var(--lt-muted) !important; } .lt-dock a i { font-size: 21px; } .lt-dock a.active { color: var(--lt-ink) !important; background: var(--lt-milk); } .lt-dock a.lt-dock-main { margin: -18px 4px 0; padding: 10px 2px 8px; color: var(--lt-on-dark) !important; background: var(--lt-grad); box-shadow: 0 14px 24px -12px rgba(30, 34, 88, .45); } .lt-dock a.lt-dock-main i { color: var(--lt-latte); } .lt-foot { margin: 10px 14px 100px; padding: 26px 18px 16px; border-radius: 22px; } .lt-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .lt-foot-col:last-child { grid-column: 1 / -1; } .b-head { align-items: flex-start; margin-bottom: 16px; padding-bottom: 14px; } .b-head > i { width: 44px; height: 44px; font-size: 20px; border-radius: 14px; } .b-head-right { width: 100%; margin-left: 0; } .b-head-right .b-btn { flex: 1; } .b-card { border-radius: 18px; margin-bottom: 14px; } .b-card-head { padding: 13px 14px; } .b-card-head small { display: none; } .b-card-body { padding: 16px 14px; } .b-grid2 { grid-template-columns: 1fr; } .b-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } .b-stat { padding: 14px; } .b-stat > b { font-size: 1.3rem; } .b-table th, .b-table td, .b-page .dataTable thead th, .b-page .dataTable tbody td { padding: 10px 12px !important; } .lt-body .b-page .dataTables_filter input { width: 150px !important; } .b-tabs { display: flex; width: 100%; } .b-tabs li { flex: 1 1 auto; } .b-tabs a { justify-content: center; width: 100%; padding: 9px 10px; font-size: .78rem; } .b-opts { grid-template-columns: 1fr; } .b-search-form { grid-template-columns: 1fr; } .b-search-form .wide { grid-column: auto; } .b-auth { grid-template-columns: 1fr; margin-top: 8px; border-radius: 22px; } .b-auth-side { min-height: 200px; padding: 24px; } .b-auth-form { padding: 26px 18px; } .lt-body .uk-modal-dialog { padding: 20px 16px; margin: 12px auto !important; } .lt-body .uk-modal-header { margin: -20px -16px 16px !important; padding: 16px 56px 14px 16px !important; } .lt-body .uk-modal-footer { margin: 16px -16px -20px !important; padding: 14px 16px !important; } .lt-body .uk-modal-dialog .uk-grid > [class*="uk-width"] { width: 100%; margin-bottom: 8px; } /* cabinet */ .lt-cab-id { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: 20px; } .lt-cab-avatar { width: 46px; height: 46px; border-radius: 15px; } .lt-cab-wallet { grid-column: 1 / 2; grid-row: 2; align-items: flex-start; padding: 0; border: 0; } .lt-cab-id > .b-btn { grid-column: 2; grid-row: 2; justify-self: end; align-self: end; } .lt-cab-tabs { margin-left: -14px; margin-right: -14px; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; } /* tabelele cu coloane fixe devin carduri */ .b-table.fixed { display: block; min-width: 0; table-layout: auto; } .b-table.fixed colgroup, .b-table.fixed thead { display: none; } .b-table.fixed tbody { display: block; } .b-table.fixed tr { display: grid; gap: 4px 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--lt-line-2); } .b-table.fixed tbody tr:last-child { border-bottom: 0; } .b-table.fixed td { display: block; min-width: 0; padding: 0 !important; border: 0 !important; background: transparent !important; } .b-table.fixed tr#empty td { grid-column: 1 / -1; padding: 18px 0 !important; } #my_servers tr { grid-template-columns: 22px minmax(0, 1fr) auto auto; } #my_servers td:nth-child(1) { grid-area: 1 / 1; } #my_servers td:nth-child(2) { grid-area: 1 / 2 / 2 / 4; font-size: .92rem !important; } #my_servers td:nth-child(3) { grid-area: 2 / 2 / 3 / 4; font-size: .78rem !important; } #my_servers td:nth-child(4) { grid-area: 3 / 3; text-align: right; font-size: .78rem !important; font-family: var(--lt-f-mono); } #my_servers td:nth-child(5) { grid-area: 3 / 2; font-size: .78rem !important; } #my_servers td:nth-child(6) { grid-area: 1 / 4 / 3 / 5; } .b-table.fixed:not(#my_servers) tr { grid-template-columns: minmax(0, 1fr) auto; } .b-table.fixed:not(#my_servers) td:nth-child(1) { grid-area: 1 / 1 / 2 / 3; font-size: .92rem !important; } .b-table.fixed:not(#my_servers) td:nth-child(2) { grid-area: 2 / 1; font-size: .8rem !important; } .b-table.fixed:not(#my_servers) td:nth-child(4) { grid-area: 2 / 2; text-align: right; font-size: .74rem !important; } .b-table.fixed:not(#my_servers) td:nth-child(3) { grid-area: 3 / 1 / 4 / 3; margin-top: 2px; } /* home */ .hm-hero { margin-top: 2px; padding: 24px 18px; border-radius: 24px; } .hm-hero::after { inset: 10px; } .hm-hero-actions .b-btn { flex: 1 1 100%; } .hm-scope { padding: 14px; gap: 12px; border-radius: 20px; } .hm-radar { width: 110px; } .hm-telemetry > div { padding-left: 12px; } .hm-svcs { gap: 10px; margin-bottom: 36px; } .hm-svc { min-height: 168px; padding: 16px; border-radius: 18px; } .hm-svc > i { margin-top: 8px; font-size: 26px; } .hm-svc small { display: none; } .hm-section { margin-bottom: 34px; } .hm-title { flex-wrap: wrap; } .hm-title small { width: 100%; margin-left: 38px; margin-top: -8px; } .hm-top-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .hm-top-shot { height: 92px; padding: 8px; } .hm-top-body { padding: 12px 10px; gap: 8px; } .lt-body .hm-top-title { font-size: .84rem; } .hm-top-foot .hm-copy { display: none; } .hm-top-foot { justify-content: space-between; } .hm-top-map { left: 8px; font-size: .66rem; } .hm-srv { grid-template-columns: 92px minmax(0, 1fr) auto; grid-template-areas: "map main play" "load load votes"; gap: 10px 12px; padding: 10px; border-radius: 16px; } .hm-srv:hover { transform: none; } .hm-srv > .hm-srv-map { grid-area: map; height: 66px; align-self: start; } .hm-srv-map span { display: none; } .hm-srv > .hm-srv-main { grid-area: main; } .hm-srv > .hm-players { grid-area: load; flex-direction: row; align-items: center; gap: 10px; } .hm-srv > .hm-players .hm-meter { flex: 1; } .hm-srv > .hm-votes { grid-area: votes; display: inline-flex; } .hm-srv > .hm-play { grid-area: play; align-self: start; padding: 0; width: 38px; height: 38px; } .hm-srv > .hm-play span { display: none; } .hm-srv-sub .hm-copy { max-width: 100%; } .hm-srv-mapname { display: inline-flex; } .lt-body .hm-srv-title { font-size: .9rem; } .hm-about { border-radius: 22px; } .hm-tips > li { padding-left: 44px; } .hm-about-cta .b-btn { width: 100%; } /* listing */ .srv-hero { align-items: flex-start; } .srv-side, .srv-clock { width: 100%; } .srv-clock { justify-content: center; } .srv-page .margin_block_listing { margin-left: -4px; margin-right: -4px; border-radius: 18px; } /* pagina serverului */ .si-hero { padding: 16px; border-radius: 22px; } .si-stats { gap: 8px; } .si-stat { padding: 10px 12px; } .si-kvs { grid-template-columns: 1fr; } .si-kv:nth-child(odd) { border-right: 0; } .si-kv { padding: 11px 14px; } .si-card { border-radius: 18px; margin-bottom: 14px; } .si-card-head { padding: 13px 14px; } .si-svc-row { flex-wrap: wrap; padding: 12px 14px; } .si-svc-row > div { flex: 1 1 calc(100% - 50px); min-width: 0; } .si-svc-row .si-pill { margin-left: 46px; white-space: normal; } .si-empty { padding: 14px; } .lt-body .si-page .si-btn { width: 100%; } .si-page #players_list { table-layout: fixed; } .si-page #players_list th, .si-page #players_list td { padding: 8px 10px !important; font-size: .82rem; } .si-page #players_list th:nth-child(2), .si-page #players_list td:nth-child(2) { width: 56px; } .si-page #players_list th:nth-child(3), .si-page #players_list td:nth-child(3) { width: 76px; } .si-page #players_list td:first-child { max-width: none; } .si-page #players_list tbody tr:not(#empty) td:first-child::before { min-width: 22px; height: 22px; margin-right: 8px; font-size: .66rem; } .si-seo { padding: 16px !important; font-size: .88rem; } .si-preview { padding: 14px; } .si-code { padding: 14px 14px 0; } .si-code:last-child { padding-bottom: 14px; } .si-code-row { flex-direction: column; gap: 8px; } .si-code-row .uk-button { width: 100%; } } @media (max-width: 400px) { .hm-top-grid { grid-template-columns: 1fr; } .hm-svcs { grid-template-columns: 1fr 1fr; } .b-stats { grid-template-columns: 1fr 1fr; } .b-guest-actions { flex-direction: column; } } /* cine preferă mai puțină mișcare */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .lt-body *, .lt-body *::before, .lt-body *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .lt-rv { opacity: 1; transform: none; } } /* ===================================================================== ACTUALIZARE 2 ===================================================================== */ /* --- ferestre mai late când conțin tabele (ex. lista de connects: nick, masterserver, client…) --- */ .lt-body .uk-modal-dialog:has(table), .lt-body .uk-modal-dialog-large, .lt-body .uk-modal-dialog.wide { width: min(1040px, calc(100% - 24px)); } .lt-body .uk-modal-dialog table { width: 100%; border-collapse: collapse; font-size: .84rem; } .lt-body .uk-modal-dialog table th { padding: 10px 12px; border-bottom: 1px solid var(--lt-line); background: var(--lt-foam); color: var(--lt-muted); font-family: var(--lt-f-mono); font-size: .64rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-align: left; white-space: nowrap; } .lt-body .uk-modal-dialog table td { padding: 9px 12px; border-bottom: 1px solid var(--lt-line-2); color: var(--lt-ink); white-space: nowrap; } .lt-body .uk-modal-dialog table tr:hover td { background: var(--lt-foam); } .lt-body .uk-modal-dialog:has(table) > :not(.uk-modal-header):not(.uk-close) { overflow-x: auto; } /* --- paginile de text (rules, stats, our services…): conținutul ocupă tot cardul --- */ .b-prose > *, .b-prose div, .b-prose section, .b-prose table, .b-prose iframe { max-width: 100% !important; } .b-prose > div[style*="width"], .b-prose > section[style*="width"], .b-prose > center { width: 100% !important; } .b-prose iframe { width: 100%; border: 0; border-radius: 14px; } /* --- Like / Dislike --- */ .hm-vote .bxs-like, .hm-vote .bxs-dislike, .si-vote .bxs-like, .si-vote .bxs-dislike, .hm-vote:hover .bx-like, .hm-vote:hover .bx-dislike, .si-vote:hover .bx-like, .si-vote:hover .bx-dislike { display: none; } .hm-vote:hover .bxs-like, .hm-vote:hover .bxs-dislike, .si-vote:hover .bxs-like, .si-vote:hover .bxs-dislike { display: inline-block; } .hm-vote, .si-vote { font-size: 17px; } .hm-vote.up, .si-vote.up { color: var(--lt-ok); } .hm-vote.down, .si-vote.down { color: var(--lt-bad); } /* --- Home: ultima cumpărare --- */ .hm-last[hidden] { display: none; } .hm-last-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: stretch; } .hm-last-main { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 14px; border: 1px solid var(--lt-line); border-radius: 22px; background: var(--lt-paper); box-shadow: var(--lt-shadow); } .hm-last-main.lt-new { animation: lt-newbuy 1.6s var(--lt-ease); } @keyframes lt-newbuy { 0% { box-shadow: 0 0 0 0 rgba(107, 121, 219, .55); } 70% { box-shadow: 0 0 0 14px rgba(107, 121, 219, 0); } } .hm-last-shot { position: relative; min-height: 150px; border-radius: 14px; overflow: hidden; background: var(--lt-milk) center / cover; } .hm-last-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(26, 28, 59, .75)); } .hm-last-shot span { position: absolute; left: 12px; bottom: 10px; z-index: 1; font-family: var(--lt-f-mono); font-size: .74rem; color: #fff; } .hm-last-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 4px 6px 4px 0; } .hm-last-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .hm-last-svc { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 8px; font-family: var(--lt-f-mono); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lt-on-dark); background: var(--lt-grad); white-space: nowrap; } .hm-last-svc i { font-size: 14px; } .hm-last-svc.svc-befirst { color: #6b4a0b; background: linear-gradient(140deg, #f7e1ae, #d9a548); } .hm-last-svc.svc-vip { color: var(--lt-caramel); background: var(--lt-paper); box-shadow: inset 0 0 0 1px var(--lt-caramel); } .hm-last-svc.svc-gamemenu { color: #2f6b45; background: #e3f3e8; } .hm-last-svc.svc-color { color: #9a3d7a; background: #f8e6f2; } .hm-last-time { font-family: var(--lt-f-mono); font-size: .74rem; color: var(--lt-muted); } .lt-body .hm-last-name { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.35rem); letter-spacing: -.03em; } .hm-last-name a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lt-ink) !important; } .hm-last-name a:hover { color: var(--lt-caramel) !important; } .hm-last-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .hm-last-meta .hm-meter { flex: 1 1 80px; min-width: 60px; } .lt-body .hm-last-body .b-btn { align-self: flex-start; margin-top: auto; } .hm-last-list { display: flex; flex-direction: column; margin: 0; padding: 6px 16px; list-style: none; border: 1px solid var(--lt-line); border-radius: 22px; background: var(--lt-paper); box-shadow: var(--lt-shadow); } .hm-last-list[hidden] { display: none; } .hm-last-list li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--lt-line-2); } .hm-last-list li:last-child { border-bottom: 0; } .hm-last-list li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; font-weight: 700; color: var(--lt-ink) !important; } .hm-last-list .hm-last-svc { height: 22px; padding: 0 7px; font-size: .6rem; } /* --- Pagina serverului (nouă) --- */ .sp-banner { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 320px; padding: clamp(18px, 3vw, 34px) clamp(18px, 3vw, 34px) 70px; border-radius: 30px; background: var(--map, none) center / cover var(--lt-espresso); color: #fff; } .sp-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(35, 39, 90, .35) 0%, rgba(26, 28, 59, .88) 100%); } .sp-banner::after { content: ""; position: absolute; inset: 14px; z-index: -1; border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px; pointer-events: none; } .sp-banner-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sp-banner .si-pill { border-color: rgba(255, 255, 255, .25); color: #fff; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .sp-banner .si-pill.ok { color: #b9f3cf; } .sp-banner .si-pill.bad { color: #ffc2b8; } .sp-map-tag { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-family: var(--lt-f-mono); font-size: .78rem; color: rgba(255, 255, 255, .85); } .sp-banner-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .sp-banner-txt { min-width: 0; flex: 1 1 420px; } .lt-body .sp-banner .si-title { margin: 0 0 12px; font-size: clamp(1.5rem, 3.6vw, 3rem); line-height: 1.05; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .35); } .sp-banner .si-addr { border-color: rgba(255, 255, 255, .25); color: #fff; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .sp-banner .si-addr i { color: #fff; } .lt-body .sp-join { color: var(--lt-ink) !important; background: #fff; box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .6); } .lt-body .sp-join:hover { color: var(--lt-caramel) !important; background: #fff; } .sp-kpis { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: -48px clamp(12px, 2.4vw, 28px) 24px; } .sp-kpi { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 18px; border: 1px solid var(--lt-line); border-radius: 18px; background: var(--lt-paper); box-shadow: var(--lt-shadow-lift); } .sp-kpi-k { display: flex; align-items: center; gap: 6px; font-family: var(--lt-f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lt-muted); } .sp-kpi-k i { font-size: 15px; color: var(--lt-caramel); } .sp-kpi > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--lt-f-display); font-size: 1.45rem; font-weight: 600; letter-spacing: -.03em; color: var(--lt-ink); } .sp-kpi > b small { font-size: .65em; font-weight: 400; color: var(--lt-muted); } .sp-kpi > b.sp-kpi-map { font-family: var(--lt-f-mono); font-size: 1.05rem; font-weight: 500; letter-spacing: 0; } .sp-kpi .si-rate b { font-size: 1.3rem; } .sp-kpi.connects_wrapper .connects { font-size: 1.3rem; } .sp-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; } /* coloana mai scurtă urmează scroll-ul, ca să nu rămână spațiu gol lângă cea lungă */ .si-page .sp-body > .server_podrobnee, .si-page .sp-body > .sp-col-main { position: sticky; top: 92px; align-self: start; display: flex; flex-direction: column; gap: 20px; min-width: 0; margin: 0 !important; padding: 0 !important; } .si-page .sp-col-main > .si-card { margin: 0; } .si-page .sp-body > .server_podrobnee > .si-card { margin: 0; } .si-page .sp-body > .player_server { margin: 0; } /* graficul „Player connections in the last 7 days” adăugat de script în coloana laterală */ .si-page .server_podrobnee > div:not(.si-card) { padding: 14px; border: 1px solid var(--lt-line); border-radius: 22px; background: var(--lt-paper); box-shadow: var(--lt-shadow); } .sp-list { margin: 0; padding: 4px 20px; } .sp-list > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--lt-line); } .sp-list > div:last-child { border-bottom: 0; } .sp-list dt { display: flex; align-items: center; gap: 7px; flex: none; font-family: var(--lt-f-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lt-muted); } .sp-list dt i { font-size: 15px; color: var(--lt-caramel); } .sp-list dd { min-width: 0; margin: 0; text-align: right; font-size: .86rem; font-weight: 700; color: var(--lt-ink); overflow-wrap: anywhere; } .sp-list dd img { vertical-align: -3px; border-radius: 2px; } .sp-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; } .sp-foot > * { margin: 0 !important; } .si-page .player_server #players_list td:first-child { max-width: none; } @media (max-width: 1100px) { .sp-body { grid-template-columns: 1fr; } .si-page .sp-body > .server_podrobnee, .si-page .sp-body > .sp-col-main { position: static; } .sp-foot { grid-template-columns: 1fr; } } @media (max-width: 760px) { .sp-banner { min-height: 250px; gap: 26px; padding: 16px 16px 58px; border-radius: 22px; } .sp-banner::after { inset: 8px; border-radius: 16px; } .sp-map-tag { display: none; } .lt-body .sp-join { width: 100%; } .sp-kpis { grid-template-columns: 1fr 1fr; gap: 8px; margin: -40px 8px 16px; } .sp-kpi { padding: 12px; border-radius: 14px; } .sp-kpi > b { font-size: 1.15rem; } .hm-last-grid { grid-template-columns: 1fr; } .hm-last-main { grid-template-columns: 1fr; padding: 10px; border-radius: 18px; } .hm-last-shot { min-height: 120px; } .lt-body .hm-last-body .b-btn { align-self: stretch; } } @media (min-width: 761px) and (max-width: 1100px) { .hm-last-grid { grid-template-columns: 1fr; } } /* ===================================================================== ACTUALIZARE 3 ===================================================================== */ /* --- scroll mai fluid pe Home --- */ .hm-srv { content-visibility: auto; contain-intrinsic-size: auto 118px; } .hm-radar.is-paused .hm-radar-sweep, .hm-radar.is-paused .hm-blip { animation-play-state: paused; } .hm-blip { will-change: opacity, transform; } .hm-dot.on::after { will-change: transform, opacity; } /* --- punctul online/offline: mai mult spațiu față de iconița jocului --- */ .lt-body .hm-srv-title { gap: 10px; } .hm-dot { margin: 0 6px 0 4px; } /* --- Listing: punct online/offline la fiecare server --- */ .srv-page .name_listing_server .hm-dot { display: inline-block; margin: 0 12px 0 5px; vertical-align: 1px; } /* --- pagina serverului: pătratele de la Connects aliniate la stânga --- */ html body .sp-kpi .connects, html body .sp-kpi :has(> .uk-button-mini-connects) { justify-content: flex-start !important; align-self: flex-start; } .sp-kpi.connects_wrapper { align-items: flex-start; } .si-page .sp-chart { padding: 16px; } .si-page .sp-chart canvas { max-width: 100%; } /* --- logo în subsol, ca sus --- */ .lt-foot-brandmark { margin-bottom: 16px; } .lt-foot-brandmark .lt-brand-mark { width: 38px; height: 38px; } .lt-foot-brandmark .lt-brand-word { font-size: clamp(1.3rem, 2.4vw, 1.8rem); } .lt-foot-brandmark .lt-brand-word em { font-size: .7rem; vertical-align: 5px; } /* --- bara laterală: serverul cu cele mai multe voturi --- */ .lt-voted-label[hidden], .lt-voted[hidden] { display: none !important; } .lt-voted { display: block; margin: 2px 2px 8px; border: 1px solid var(--lt-line); border-radius: 16px; overflow: hidden; background: var(--lt-paper); color: var(--lt-ink) !important; box-shadow: var(--lt-shadow); transition: border-color .2s, transform .3s var(--lt-ease); } .lt-voted:hover { border-color: var(--lt-caramel); transform: translateY(-2px); } .lt-voted-shot { position: relative; display: block; height: 74px; background: var(--map, none) center / cover var(--lt-milk); } .lt-voted-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 28, 59, .05), rgba(26, 28, 59, .55)); } .lt-voted-votes { position: absolute; left: 10px; bottom: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 8px; font-family: var(--lt-f-mono); font-size: .74rem; font-weight: 700; color: var(--lt-on-dark); background: var(--lt-grad); } .lt-voted-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; } .lt-voted-body b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; font-weight: 800; } .lt-voted-meta { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--lt-f-mono); font-size: .7rem; color: var(--lt-muted); } .lt-voted-meta .hm-dot { margin: 0 4px 0 2px; } @media (max-height: 760px) and (min-width: 1180px) { .lt-rail-cta { display: none; } } /* ===================================================================== ACTUALIZARE 4 ===================================================================== */ /* --- Be First / Top: hover discret --- */ .hm-top { transform: none !important; } .hm-top:hover { box-shadow: 0 18px 36px -28px rgba(30, 34, 88, .45); } /* --- Home: ultimii jucători + ultimele cumpărări --- */ .hm-last-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; } .hm-last-grid > .hm-panel[hidden] { display: none; } .hm-panel { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px 8px; border: 1px solid var(--lt-line); border-radius: 22px; background: var(--lt-paper); box-shadow: var(--lt-shadow); } .hm-panel > .hm-title { margin-bottom: 4px; padding-bottom: 12px; } .lt-body .hm-panel > .hm-title h2 { font-size: 1.05rem; } .hm-last-list, .hm-joins { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 0; border-radius: 0; background: none; box-shadow: none; } .hm-last-list li, .hm-joins li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px 0; border-bottom: 1px solid var(--lt-line-2); } .hm-last-list li:last-child, .hm-joins li:last-child { border-bottom: 0; } .hm-last-list li.lt-new { animation: lt-flash 1.6s var(--lt-ease); } .hm-last-list .hm-last-svc { flex: none; min-width: 92px; justify-content: center; height: 24px; padding: 0 8px; font-size: .6rem; } .hm-last-txt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; } .hm-last-txt a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; font-weight: 700; color: var(--lt-ink) !important; } .hm-last-txt a:hover { color: var(--lt-caramel) !important; } .hm-last-rounds { flex: none; padding: 2px 8px; border-radius: 6px; font-family: var(--lt-f-mono); font-size: .68rem; font-weight: 700; color: var(--lt-mocha); background: var(--lt-milk); white-space: nowrap; } .hm-last-time { flex: none; font-family: var(--lt-f-mono); font-size: .72rem; color: var(--lt-muted); white-space: nowrap; } .hm-join-flag { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid var(--lt-line); border-radius: 11px; background: var(--lt-foam); } .hm-join-flag img { width: 20px; height: auto; border-radius: 2px; } .hm-join-flag i { font-size: 18px; color: var(--lt-muted); } .hm-join-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .hm-join-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 800; color: var(--lt-ink); } .hm-join-txt a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; font-weight: 600; color: var(--lt-muted) !important; } .hm-join-txt a:hover { color: var(--lt-caramel) !important; } @media (max-width: 1100px) { .hm-last-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .hm-panel { padding: 14px 14px 4px; border-radius: 18px; } .hm-last-list .hm-last-svc { min-width: 0; } .hm-last-rounds { display: none; } } /* --- bara laterală: cele mai votate 2 servere --- */ .lt-voted-list { display: flex; flex-direction: column; gap: 8px; margin: 2px 2px 10px; } .lt-voted-list:empty { display: none; } .lt-voted-list .lt-voted { margin: 0; } .lt-voted-shot { height: 64px; } .lt-voted-rank { position: absolute; right: 8px; top: 8px; z-index: 1; padding: 2px 7px; border-radius: 6px; font-family: var(--lt-f-mono); font-size: .66rem; font-weight: 700; color: var(--lt-ink); background: rgba(255, 255, 255, .92); } /* ===================================================================== ACTUALIZARE 5 ===================================================================== */ /* --- jucători: toți la fel (fără 1-2-3 colorate, același nick) --- */ .si-page #players_list tbody tr:not(#empty) td { color: var(--lt-ink-2); font-weight: 500; } .si-page #players_list tbody tr:not(#empty) td:first-child { color: var(--lt-ink); font-weight: 600; box-shadow: none; } .si-page #players_list tbody tr:not(#empty) td:first-child::before { border-color: var(--lt-line); color: var(--lt-muted); background: var(--lt-paper); } /* --- punctul online/offline: verde sau roșu, cu puls, și cu loc în jurul lui --- */ .hm-dot { position: relative; display: inline-block; flex: none; width: 8px; height: 8px; margin: 0 12px 0 8px; border-radius: 50%; color: var(--lt-bad); background: currentColor; vertical-align: middle; } .hm-dot.on { color: var(--lt-ok); background: currentColor; } .hm-dot::after, .hm-dot.on::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid currentColor; animation: lt-ping-soft 2.4s var(--lt-ease) infinite; will-change: transform, opacity; } @keyframes lt-ping-soft { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } } .lt-body .hm-srv-title { gap: 8px; } .srv-page .name_listing_server { padding-left: 2px; } .srv-page .name_listing_server .hm-dot { margin: 0 12px 0 8px; vertical-align: 0; } .lt-voted-meta .hm-dot { margin: 0 8px 0 6px; } .hm-join-txt b { display: flex; align-items: center; min-width: 0; } .hm-join-txt b .hm-dot { margin: 0 10px 0 6px; } .lt-live { gap: 11px; padding-left: 4px; } .lt-live i::after { inset: -3px; animation-name: lt-ping-soft; } .hm-joins li.lt-new { animation: lt-joinin .9s var(--lt-ease); } @keyframes lt-joinin { 0% { opacity: 0; transform: translateY(-8px); background: rgba(107, 121, 219, .14); } 60% { opacity: 1; transform: none; } 100% { background: transparent; } } /* lista „Last players joined”: ora + harta în dreapta */ .hm-join-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; max-width: 40%; } .hm-join-map { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; font-family: var(--lt-f-mono); font-size: .68rem; color: var(--lt-faint); } .hm-join-txt .lt-mono { font-size: .74rem; color: var(--lt-muted); } /* ===================================================================== OUR PLAYERS (NDirectModules/our_players/ajax/main.js) ===================================================================== */ .op-user-ico { display: block; flex: none; } .op-user { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; margin-right: 8px; border-radius: 6px; color: #fff; background: var(--lt-grad); vertical-align: middle; box-shadow: 0 3px 8px -3px rgba(88, 101, 204, .7); } .op-user .op-user-ico { width: 12px; height: 12px; } /* eticheta „our player” */ .op-tag { display: inline-flex; align-items: center; height: 18px; margin-left: 8px; padding: 0 7px; border: 1px solid rgba(107, 121, 219, .45); border-radius: 6px; background: var(--lt-milk); color: var(--lt-mocha); font-family: var(--lt-f-mono); font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; vertical-align: middle; } /* rândul jucătorului nostru pe pagina serverului */ .si-page #players_list td.op-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .si-page #players_list .op-name-txt { font-weight: 700; color: var(--lt-ink); vertical-align: middle; } .si-page #players_list tbody tr.op-row td { background: rgba(107, 121, 219, .06); } /* nota de sub tabel */ html body .si-page #ourplayers-online-note, #ourplayers-online-note { display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px; width: auto !important; max-width: none; margin: 0 !important; padding: 12px 20px !important; border: 0 !important; border-top: 1px solid var(--lt-line-2) !important; border-radius: 0 !important; background: var(--lt-foam) !important; color: var(--lt-muted); font-size: .78rem !important; line-height: 1.4 !important; text-align: left; } #ourplayers-online-note > * { margin: 0 !important; } #ourplayers-online-note .op-user { margin: 0 !important; } #ourplayers-online-note .op-tag { margin: 0 !important; } /* insigna din Listing: câți jucători de-ai noștri sunt pe server */ .srv-page .name_listing_server.op-has-badge { display: inline-flex !important; align-items: center; gap: 8px; overflow: visible; } .op-badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px 0 5px; border-radius: 99px; color: #fff; background: var(--lt-grad); font-size: .7rem; line-height: 1; white-space: nowrap; cursor: help; box-shadow: 0 3px 8px -3px rgba(88, 101, 204, .7); } .op-badge .op-user-ico { width: 11px; height: 11px; } .op-badge b { font-family: var(--lt-f-mono); font-size: .7rem; font-weight: 700; color: #fff; }